Shopify themes, liquid, logos, and UX
I'm doing a custom product template, where I need to make the variant selector a simple <select> dropdown. It's easy to get it to show, but I'm unable to get the meta data to update when I change the value.
The Dropdown that I have is:
<div class="ProductForm__Option">
<div class="Select Select--primary">
{%- render 'icon' with 'select-arrow' -%}
<select id="product-select-{{ product.id }}" name="id" title="Variant">
{%- for variant in product.variants -%}
<option {% if variant == selected_variant %}selected="selected"{% endif %} {% unless variant.available %}disabled="disabled"{% endunless %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
{%- endfor -%}
</select>
</div>
</div>
{%- else -%}
<input type="hidden" name="id" data-sku="{{ selected_variant.sku }}" value="{{ selected_variant.id }}">
{%- endunless -%}
But when looking in theme.js, I can't really see how I should be able to hook up a select to the "_onVariantChanged". Is this completely unsupported in this theme?
Prestige theme
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025