How to use Variant metafield on your Product template?

Sometimes the details you want to show depend on the exact option a customer picks, like the material of each size or the care notes for each color. Shopify lets you store that kind of information on each variant with a variant metafield. In this guide, you’ll create the metafield, fill in a value for every variant, then show it on your EComposer product page so the text changes as soon as a customer switches variants.

1. Create a variant metafield definition

First, tell Shopify what kind of information each variant will hold. You only need to do this once per metafield.

Step 1: In your Shopify admin, go to Settings > Metafields and metaobjects, then click Variants.

Step 2: Click Add definition in the top right corner to start a new metafield.

Step 3: Give the metafield a Name and pick its Type (we’re using Single line text here), then click Save. Right under the name, Shopify shows the namespace and key, for example custom.material_details. Note it down, because you’ll need it in the code later.

2. Add a value to each variant

Now fill in the content for every variant of the product you want to show it on.

Step 1: Go to Products, open your product, then click the variant you want to edit in the Variants list.

Step 2: Scroll down to the Metafields card, enter the value for this variant and click Save. Repeat this for the other variants so each one has its own content.

3. Show the variant metafield on your product page

Next, open your product template in EComposer and add a Metafields element where you want the information to appear. It will show the value of the variant that’s selected when the page loads.

Step 1: Click the + icon on the left, search for Metafields and drag the element onto your page, for example right below the product price.

Step 2: With the element selected, set Metafield source to Custom Liquid, then paste the code below into the Metafield namespace and key box. Replace custom.material_details with your own namespace and key, and the canvas will show the value right away.

{{ product.selected_or_first_available_variant.metafields.custom.material_details }}

If your metafield is a Rich text or Multi-line text type, use this version instead so the formatting is kept:

{{ product.selected_or_first_available_variant.metafields.custom.material_details | metafield_tag }}

Step 3: Open the Advanced tab, expand Attributes and type a unique CSS ID such as variant-material. The code in the next section uses this ID to find the element.

The Metafield of option only lists Product, Collection, Page, Article, Blog and Shop, so variant metafields always go through Custom Liquid as shown above.

4. Update the content when the customer changes variants

On its own, the Metafields element keeps showing the first value even after a customer picks another option. A small script in a Code element fixes that by swapping in the right value every time the variant changes.

Step 1: Add a Code element (you’ll find it under Basic in the + panel) right below the Metafields element, then paste the following code into its Custom Code box.

{% capture meta_data %}{% for variant in product.variants %}"{{ variant.id }}": {{ variant.metafields.custom.material_details | metafield_tag | json }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
<script>
  (function () {
    var metaData = { {{ meta_data }} };
    var target = '#variant-material .ecom-product-single__metafield-container';
    var current = null;
    function update() {
      var input = document.querySelector('form[action*="/cart/add"] [name="id"]');
      var id = (input && input.value) || new URLSearchParams(location.search).get('variant');
      var box = document.querySelector(target);
      if (!id || !box || id === current) return;
      current = id;
      box.innerHTML = metaData[id] || '';
    }
    document.addEventListener('change', function () { setTimeout(update, 100); });
    setInterval(update, 500);
  })();
</script>

Before you save, change two things to match your setup: replace custom.material_details in the first line with your namespace and key, and replace variant-material with the CSS ID you set in section 3.

Step 2: Click Save, then preview the product on your store and switch between variants. The metafield text will update to match each option.

Using this on a landing page with a Product Details section? Add {% assign product = all_products['your-product-handle'] %} as the very first line of the Code element, replacing your-product-handle with the handle of that product.

5. Show more than one variant metafield

Want to show several pieces of information, like material and care instructions? Simply repeat sections 3 and 4 for each metafield: add another Metafields element with its own CSS ID, then a new Code element below it with that metafield’s namespace and key and the new ID. Each script runs on its own, so you don’t need to rename anything else.

If you can’t get it working on your theme, don’t hesitate to reach out to us via live chat, and we’ll be happy to help you check it.