Variant Metafields change when different option is selected

Shopify Plus
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.