By using metaafields we can store extra information on products, collections, customers, orders, blogs, pages and your shop. Then, you can use the metafields object to display the information on you website pages using simple Liquid code.

The easiest way to add metafields is by using an app, such as Metafields Guru. It is possible to add metafields without an app using the bulk editor, here’s how.

A metafield consists of a namespace, a key, a value, and an optional description. The namespace is used to logically group different metafields.

You can also add metafields to the product variants, but it is more complcated to access the variant metafield information on your page. Variant metafields can display some different information depending on the selected variant. To achieve this it’s necessary to update the information depending on a change to the selected variant. The involves updating the javascript connected to the selctor.

Here is an explanation on how to achive this with the Debut theme, it may differ slightly depending the themes you are using.

For example, here’s how to display different shipping inforamtion depending on a selected product variant:

  • Add some html like this to the product-template.liquid file (position it where you would like to display the shipping information):
<p class="variant_shipping_info" style="display: none;"></p>
  • Below this add some liquid code:
{% capture 'meta_data' %}
{% for variant in product.variants %}
{{variant.id}}:{{ variant.metafields.shipping.time | json }}{% unless forloop.last %},{% endunless %}
  {% endfor %}
{% endcapture %}
  • Then, add this javascript inside tags:
  const currentVariantId = {{ product.selected_or_first_available_variant.id }};
  const metaData = { {{ meta_data }} };
  const shippingInfo = (id) => {
  var selector = document.querySelector('.variant_shipping_info');
    if (metaData[id]) {
     selector.style.display = 'block'
     selector.innerHTML = metaData[id];
    }
  }
  shippingInfo(currentVariantId);

Make sure to change the naming to match your metafields. Mine are variant.metafields.shipping.time

Next you need to update the theme.js file. Find the code for the Event handler for when a variant input changes, and add these few lines near the end.

 if (variant) {
	  var id = variant.id
	  shippingInfo(id);
      }

Like this:

 _onSelectChange: function() {
      var variant = this._getVariantFromOptions();

      this.$container.trigger({
        type: 'variantChange',
        variant: variant
      });

      if (!variant) {
        return;
      }

      this._updateMasterSelect(variant);
      this._updateImages(variant);
      this._updatePrice(variant);
      this._updateSKU(variant);
      this.currentVariant = variant;

      if (this.enableHistoryState) {
        this._updateHistoryState(variant);
      }


      if (variant) {
	  var id = variant.id
	  shippingInfo(id);
      }

    },

Now your variant metafield should update as you select different options.