How can I display dynamic product variants metafields on a product page?

Technical Q&A

Topic summary

Problem: A user wants to display variant-specific metafields (like “material”) that update dynamically when customers select different product options, similar to how SKU numbers change automatically.

Root Cause: The metafield displays correctly on initial page load but remains static because it’s not connected to the JavaScript variant selection callback function that handles dynamic updates.

Solution Approach:

  1. Capture variant metafield data in product-template.liquid using a Liquid loop that creates a JavaScript object mapping SKU to metafield values:
{% capture 'meta_data' %}
{% for variant in product.variants %}
{{ variant.sku | json }}: {{ variant.metafields.specs.material | json }}
{% endfor %}
{% endcapture %}
  1. Update the selectCallback function in sections.js.liquid to pull and display the metafield based on selected variant:
$('.material span', $product).text(metaData[variant.sku]);
  1. Display the metafield in the product template using the same structure as SKU display.

Common Issues:

  • Variants without metafield data showing previous values (solved by adding null checks in JavaScript)
  • Multiple metafields requiring array formatting
  • Theme-specific implementation differences

Multiple users confirmed this solution works, particularly with Turbo and Debut themes. Some hired developers when unable to implement it themselves.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
16

I’m at that exact spot too - I’m using variant fields to show a ‘back in stock’ message when the person clicks on the variant swatch.

i have it working well when all variations have data in the field but when one doesn’t, it keeps showing the data from the last click.

My one thought is in the JS i’m using to have a ‘if is null’ kind of statement, but i can’t get it working.

Here’s my code:

{%- if product.metafields.product.stock_info != blank -%} //This tells it to use the main Product field if it exists and ignore variant fields
        {{ product.metafields.product.stock_info }}

      {%- else -%}
      
 //This is the main block to show the info, its hidden first, then turned to 'block' when activated.
          {% capture meta_data %}
          	{% for variant in product.variants %}
                {%- if variant.metafields.variant.stock_date != blank -%}
                  	{{ variant.id}}:{{variant.metafields.variant.stock_date | json}}
              	{%- endif -%}
    		{% unless forloop.last %},{% endunless %}
          	{% endfor %}
          {% endcapture %}
    
       

          {%- endif -%}