How to use Variant metafield on your Product template?

Author: An Do 49 views

Metafields allows you to customize the functionality and appearance of your Shopify store by letting you save specialized information that isn’t usually captured in the Shopify admin. You can use Metafields for internal tracking, or to display specialized information on your online store in a variety of ways.

With variant metafield, you can add the information for each variant. The details below might help you get more informations.

1. Add the Metafield definitions

  1. From Shopify Dashboard > Settings > Metafield
  2. Then choose Variant > Add definition and fill the information for metafield
Set variant metafield for variant
Get NAMESPACE.KEY value from Shopify

2. Adding values to metafields

  1. Go to Shopify Admin > Products > All Products > Select a certain product that you want to display on the metafields content.
  2. Scroll down and edit each variant of that product
  3. Scroll down to the bottom and fill your desired content to metafield part

3. How to show variant metafield on the Product page?

You need to drag and drop the metafield element to your desired position on the page and paste the following sample code:

{{ product.selected_or_first_available_variant.metafields.NAMESPACE.KEY }}

Note: You can get the NAMESPACE.KEY value from Variant metafield which is set from here

We need to customize a bit of code in order to make it change when the customer changes the variant. So you just need to use the Code element and paste the following code:

{% capture 'meta_data' %}
{% for variant in product.variants %}
  {{ variant.id}}: {{ variant.metafields.custom.kurzbeschreibungtuecher.value | json}} {%- comment -%} Replace it with your NAMESPACE.KEY value {%- endcomment -%}
  {% unless forloop.last %},{% endunless %}
{% endfor %}
{% endcapture %}

<script>
  var metaData = { {{ meta_data }} };
  document.addEventListener("DOMContentLoaded", function() {
    var selector = document.querySelector('select[name=id]');
    if(selector) {
      selector.addEventListener('change', function() {
        let variant_id = this.value;
          if(!variant_id) return;
          var material = metaData[variant_id],
            meta = document.querySelector('.ecom-2t1qughe1hz .ecom-product-single__metafield-container'); // Find your class which has metafiled
          if(material && meta) {
            meta.innerHTML = material;
          }
      })
    }
  });

</script>

The result will be shown correctly on the live page

4. Adding multiple variant metafield to the product page

When each variant has a lot of information and you want to show all those, you need to add multiple metafield elements as well as the code element. The picture below will help you get more details:

Multiple variant metafield on product page

If you can not do it by yourself, don’t hesitate to get in touch with us via live chat, and we will help you check and solve the problem.

Leave a Comment

On this page