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, Prestige) 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 %}

2048 variants

Shopify recently released an increase in the maximum number of variants from 100 to 2048.

However, the increased variant size is only accessible via:

• GraphQL Admin API (accessible by app backend only - to slow for loading on the page)
• Theme section rendering API (accessible by theme developers only)
• Storefront Api (accessible via custom token only)

What is still limited to 250 variants:

• Storefront Ajax API
• Liquid theme code

App developers currently have no easy way to access variants beyond the first 250 for code that is added on the storefront.

If you have more than 250 variants, the Variant Options replacement is not fully supported. In this case we recommend using the theme's native variant picker, which does have access to the Section rendering API to render all variants.