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.

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 special HTML 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.