Auto-Select Recommended Size

How to allow WAIR to automatically select the shopper's recommended size on your shop.

WAIR has the ability to automatically select a shopper's best-fitting size on your store's product page (PDP) immediately after a recommendation has been made, leading to an easier add-to-cart experience and higher conversion rates.

In order for WAIR to achieve this, the widget needs a little help from your store's theme/template to identify the options controls on your product page, such as the Size or  Waist and Length selectors.

To get started, edit your product page theme/template to include two HTML attributes on a parent element of each product option:

• data-wair-product-key
• data-wair-option-name

For example, if your product page template is outputting select or radio inputs for the Color, Waist, and Length options, add the data-wair-option-name attribute with a value of the option name to the parent element of each option set, along with data-wair-product-key to tell the widget which product these options are for:

<div data-wair-product-key="performance-jeans" data-wair-option-name="Color">
  <select>
    <option value="Navy">Navy</option>
    <option value="Black">Black</option>
    <option value="Gray">Gray</option>
    <option value="Cream">Cream</option>
  </select>
</div>

<fieldset data-wair-product-key="performance-jeans" data-wair-option-name="Waist">
  <legend>Waist</legend>
  <input type="radio" name="Waist" value="28" />
  <input type="radio" name="Waist" value="30" />
  <input type="radio" name="Waist" value="32" />
  <input type="radio" name="Waist" value="34" />
  <input type="radio" name="Waist" value="36" />
</fieldset>

<fieldset data-wair-product-key="performance-jeans" data-wair-option-name="Length">
  <legend>Length</legend>
  <input type="radio" name="Length" value="28" />
  <input type="radio" name="Length" value="30" />
  <input type="radio" name="Length" value="32" />
  <input type="radio" name="Length" value="34" />
  <input type="radio" name="Length" value="36" />
</fieldset>

By identifying the corresponding product key and option name for each set of controls, WAIR is able to accurately identify and automatically select the recommended size for each size-related option.

If your option selector(s) are of type button or a, some additional help is needed. In addition to the attributes listed above, adding the data-wair-option-value to each button/a element with the value set to the corresponding option value tells WAIR what option value that button/a represents.

For example:

<div data-wair-product-key="performance-polo" data-wair-option-name="Size">
  <p>Size:</p>
  <div>
    <button
      data-wair-option-value="S"
      type="button"
    >
      S
    </button>
    <button
      data-wair-option-value="M"
      type="button"
    >
      M
    </button>
    <button
      data-wair-option-value="L"
      type="button"
    >
      L
    </button>
    <button
      data-wair-option-value="XL"
      type="button"
    >
      XL
    </button>
  </div>
</div>

Once these simple edits are in place, WAIR will begin automatically selecting the shopper's recommended size immediately after a recommendation is made. At that point, all your shopper has to do is add it to their cart and check out.