Variant options

If you've setup variant options in the app as described in: How can I setup variant options?

Then in most cases there is no additional theme setup required.   

Theme options location

Automatic

The app will automatically hide the options from the theme and replace them with options from the app:

Hide

To avoid the theme variant options from showing at all when the page is initially loaded, apply the following code to hide them.

In your theme, find the product form liquid and look for the variant template:

{% for option in product.options_with_values %}
  <div class="selector-wrapper js product-form__item" style="display:none;">
	...
  </div>
{%- endfor -%}

Add style="display:none" to the first child tag.

Hide app only

You can also wrap your variants with the following code to let the app hide them only if the variant options are used:

<div data-live-variant-options>
  ... variants html
</div>

Manual

The app only supports replacing variant options based on HTML select or input[type=radio] elements.

If the app cannot find the variant elements, you can provide the location manually:

In your theme, find the product form liquid and look for the variant template:

{%- for option in product.options_with_values -%}
  ...
   <select data-live-variant-option="{{ forloop.index }}" >
          ...
   </select>
{%- endfor -%}

Add the attribute "data-live-variant-option"  to the select element. 

Unsupported

If your theme is using a custom variant options mechanism, it might be that the app cannot replace the variant options with options form the app. 

In this case you can reach out to us via the support button in the app and we will take a look at your theme.

OptionValue ID based themes

Some newly updated themes (e.g Impact, Focal) use optionValue.id instead of .value for the variant input value="" attribute. This prevents the app from replacing the variant picker elements.

To enable the app to find the right variant option, add the following code to your theme, the location of the code is not important, adding it to the theme.liquid or product.liquid both can work:

{% unless product == empty %}
<script type="application/json" data-live-variant-options-ids data-variant-observer>
{ {%- for option in product.options_with_values -%} {%- if forloop.first == false -%},{%- endif -%}
  "{{ option.position }}": [{%- for option_value in option.values -%}
      {%- if forloop.first == false -%},{%- endif -%}
      {"id":{{ option_value.id }},"name":"{{ option_value.name }}"}
    {%- endfor -%}]
  {%- endfor -%}
}
</script>
{% endunless %}