Variant Metafields change when different option is selected

Shopify Plus

Topic summary

Variant metafields (e.g., a LENS metafield) are not updating when a customer selects a different product option. The merchant can render both product and variant metafields in Liquid, but the displayed variant metafield stays tied to the initially rendered variant.

Cause: Liquid (Shopify’s templating language) renders server-side at page load, so it cannot react to client-side variant changes.

Proposed approach: Implement client-side JavaScript to update content on the variant change event. Pass the necessary variant metafield data into the page as JSON via Liquid (using the json filter), then parse it and swap the displayed metafield values when the selected variant changes. Extend the theme’s existing variant-change handling to include these metafields.

Key elements: The provided Custom Liquid loop checks product.selected_or_first_available_variant and outputs SERIES (product metafield) and LENS (variant metafield), but this alone won’t update dynamically.

Status: Guidance provided; no final code or confirmation of resolution. Action item is to add JS that reads pre-rendered JSON data and updates the DOM on variant selection.

Summarized with AI on January 21. AI used: gpt-5.
1

Hello.

We are trying to make our displayed metafields change when a customer selects an option on a listing.

We have no problem with displaying “product.metafield”, or “variant.metafield”, it just does not change the “variant.metafield” when a different option is selected.

Here is our code in Custom Liquid:


{%- if product.metafields.custom.series != blank -%}

{%- endif -%}

{% for variant in product.variants %}
{%- if variant.metafields.custom.lens != blank -%}
{% if product.selected_or_first_available_variant.id == variant.id %}

{% endif %}
{%- endif -%}
{% endfor %}

| <br><br><b><br>SERIES:</b> {{ product.metafields.custom.series }}<br><br> |
| - |
| <br><br><b><br>LENS: </b> {{ variant.metafields.custom.lens }} <br><br><br> |

Thanks in advance!

Luke

2

Hey mate!

Your issue is that the liquid code above is rendered server side. Essentially when the user requests the product page, Shopify will render the template and send back the response with the content replaced.

To change the metafield dynamically, it needs to happen client side via Javascript. You will have to pass the data via liquid (look into the json filter), and then on the variant change event, parse the data and display the metafield content. A similar process happens when variants change, so I would look at extending this.