---
title: Custom Styling
description: Customizing WAIR to meet your branding requirements.
---

[Skip to content](https://help.getwair.com/customizations/custom-styling#main-content)

English

Show submenu for translations

[Contact us](https://help.getwair.com/kb-tickets/new?hsLang=en)

![wair-logo-white.png\]](https://help.getwair.com/hs-fs/hubfs/wair-logo-white.png?height=40&name=wair-logo-white.png)

Open main navigation

Close main navigation

- English
  
  Show submenu for translations
- [Contact us](https://help.getwair.com/kb-tickets/new)
- WAIR Website

 WAIR Website

 Hello. How can we help you?

- There are no suggestions because the search field is empty.

1. [Knowledge base](https://help.getwair.com/?hsLang=en)
2. [Customizations](https://help.getwair.com/customizations?hsLang=en)

# Custom Styling

## Customizing WAIR to meet your branding requirements.

[The WAIR Dashboard](https://app.getwair.com) provides controls to easily configure many styling options, but in certain cases where more advanced styling is needed, we provide specific identifying HTML classes to allow for modifying placement styles via your store's CSS.

### CSS Specificity

In certain cases, you will need to override existing WAIR CSS properties to achieve your design. If your CSS is being overwritten by our default styles, you can use more specificity to target HTML elements in your placement. For example, to target the button element in both the launch and recommendation placements, you could start with this css:

```
.predict-placement.wair-css.wair-css.wair-css button {    <css goes here>}
```

### PDP Placement

#### Modifying the Button Style

The helper class .wair-launch-btn and .wair-rec-btn can be used to target the button itself. For example, to style the launch button, you would use:

```
.wair-launch-btn  {    <css goes here>}
```

#### Reference HTML Structure

Note that in both examples below the HTML has been simplified to showcase the overall structure and key classes and attributes.

**Button Style**

WAIR launch placement HTML (shown before a fit prediction has been created):

```
<div  class="predict-placement"  data-predict-product-key="unique-product-key"  data-predict-product-name="Product Name Text"  data-predict-product-img="product image url">  <button class="wair-launch-btn">    <svg class="wair-btn-logo"></svg>    <span>What's my size?</span>  </button></div>
```

WAIR recommendation placement (shown after a size recommendation has been given for a product)

```
<div  class="predict-placement"  data-predict-product-key="unique-product-key"  data-predict-product-name="Product Name Text"  data-predict-product-img="product image url">  <button class="wair-rec-btn">    <svg class="wair-btn-logo"></svg>    <span>      <span>Your size: <b>S</b></span>    </span>    <svg class="wair-btn-badge"></svg>  </button></div>
```

**Link Style**

WAIR launch placement HTML (shown before a fit prediction has been created):

```
<div  class="predict-placement"  data-predict-product-key="unique-product-key"  data-predict-product-name="Product Name Text"  data-predict-product-img="product image url">  <button class="wair-launch-btn">    <div class="wair-btn-logo">       <svg></svg>    </div>    <span>What's my size?</span>  </button></div>
```

WAIR recommendation placement (shown after a size recommendation has been given for a product)

```
<div  class="predict-placement"  data-predict-product-key="unique-product-key"  data-predict-product-name="Product Name Text"  data-predict-product-img="product image url">  <button class="wair-rec-btn">    <div class="wair-btn-logo">       <svg></svg>    </div>        <span>      <span>Your size: <b>S</b></span>    </span>    <svg class="wair-btn-badge"></svg>  </button></div>
```

### Universal Placement

#### Reference HTML Structure

Note that in both examples below the HTML has been simplified to showcase the overall structure and key classes and attributes.

**Button Format**

```
<div  class="predict-placement"  data-predict-type="predict">  <button class="wair-predict-button wair-predict-format-button">    <span>      <svg></svg>      Shop with WAIR    </span>  </button></div>
```

**Link Format**

```
<div  class="predict-placement"  data-predict-type="predict">  <button class="wair-predict-button wair-predict-format-link">    <span>      <svg></svg>      <span>Shop with WAIR</span>    </span>  </button></div>
```

#### Multiple Placements with Mixed Formats

If you'd like to display multiple Universal placements on your Shop all with varying formats and styling, you can use a specialHTML attribute to override the default format configured in the WAIR Dashboard.

For example, if the Universal Placement format is set to **button** in the WAIR Dashboard and you'd like to instead have one placement be a **link** format, you can add the **data-predict-format** HTML attribute to the placement.

```
<div class="predict-placement" data-predict-type="predict" data-predict-format="link"></div>
```

Conversely, if a format of **link** or **banner** is configured in the WAIR Dashboard and you'd like to output one placement in the **button **format:

```
<div class="predict-placement" data-predict-type="predict" data-predict-format="button"></div>
```

**Styling**

If you're taking a mixed-format approach and need to apply different CSS styling to each placement, there are a few ways to do so.

The first being targeting the **data-predict-format** attribute in your selector. For example:

```
.predict-placement[data-predict-format="button"] button {  // ...}
```

The second option being using an **id** attribute on each instance of the universal placement. For example:

```
<div class="predict-placement" data-predict-type="predict" id="wair-universal-123"></div>#wair-universal-123 button {// ...}
```

Note: The **CSS Specificity** section above may apply when writing custom CSS.

- [Getting Started for Admin](https://help.getwair.com/getting-started-for-admin?hsLang=en#main-content)

    - [Headless](https://help.getwair.com/getting-started-for-admin?hsLang=en#headless)
    - [Shopify](https://help.getwair.com/getting-started-for-admin?hsLang=en#shopify)
    - [BigCommerce](https://help.getwair.com/getting-started-for-admin?hsLang=en#bigcommerce)
    - [Custom](https://help.getwair.com/getting-started-for-admin?hsLang=en#custom)
    - [Magento](https://help.getwair.com/getting-started-for-admin?hsLang=en#magento)
- [Customizations](https://help.getwair.com/customizations?hsLang=en)
- [Troubleshooting](https://help.getwair.com/troubleshooting?hsLang=en)
- [Support Articles and FAQs](https://help.getwair.com/support-articles-and-faqs?hsLang=en)
- [Integrations](https://help.getwair.com/integrations?hsLang=en#main-content)

    - [Klaviyo](https://help.getwair.com/integrations?hsLang=en#klaviyo)
- [Legal](https://help.getwair.com/legal?hsLang=en)
- [Sales Enablement](https://help.getwair.com/sales-enablement?hsLang=en)

[![Chill listening crop-3](https://help.getwair.com/hs-fs/hubfs/favicon-black-1.png?width=24&height=24&name=favicon-black-1.png "Chill listening crop-3")](http://getwair.com)

WAIR Knowledge base

Copyright © 2026, WAIR