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:

Selector	Example
[data-live-variant-option="option.position"]	data-live-variant-option="{{ forloop.index }}"

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.

Duplicate variant pickers (sticky add to cart)

The theme's variant picker is often rendered more than once on a product page: once in the main product form, and again inside a sticky add to cart bar, a quick-buy drawer, or a quick view popup.

When a page contains more than one picker, the app can bind to one of the extra copies instead of the main one. The visible picker is then left in place and never replaced, while the setup itself looks correct: the app embed is on, the app block is added, and the native "Variant picker" block is still active.

Symptom: variant options are enabled in the app, but the theme's own variant picker is still shown on the product page and is not replaced.

Fix: mark the main picker explicitly. In your theme's product form liquid, add the data-live-variant-option attribute to the select or radio elements of the main picker only, as described in Manual above:

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

Do not add the attribute to the sticky bar or quick view copies. The app always looks for a manual selector before using the automatic location, so tagging only the main picker removes the ambiguity.

Before editing theme code you can also try moving the Variant picker block above the Live Product Options app block in the theme editor, and, if your theme's sticky bar is rendered by a separate app, disabling that bar's own variant selector, since the app's options replace it anyway.

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:

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.