Show variant metafields for selected variant
Display variant-specific metafields when a shopper selects a variant on the product page. This uses Alpine's x-show
to conditionally render content for the active variant and can be added via a Custom liquid
section.
In the theme editor, add a
Custom liquid
section to your product template.Paste the snippet below and adjust the markup/metafield as needed.
Save and preview. Switch variants to see content update.
{% for variant in product.variants %}
<div x-show="current_variant_id == {{ variant.id }}">
{{ variant.title }}
{% if variant.metafields.custom.short_description %}
– {{ variant.metafields.custom.short_description }}
{% endif %}
</div>
{% endfor %}
Notes:
current_variant_id
is managed by the theme's Alpine state and updates on selection.Duplicate the inner block to output multiple metafields.
Last updated
Was this helpful?