Custom Styling

Customizing WAIR to meet your branding requirements.

The WAIR Dashboard 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.

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>
}

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>
}

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>