How to Add and Display Variant Metafields in GemPages

What Is a Variant Metafield?

Variant metafields are custom fields attached to product variants (e.g., size, color) rather than the product itself.
They let you store information unique to each variant—such as:

• Additional images
• Descriptions
• Dimensions or technical specifications

Example: If you sell a T-shirt in Red, Blue, and Green, you can assign a unique description or image for each color variant using a variant metafield.

How To Create Variant Metafield With Shopify?

Step 1: Create a Variant Metafield Definition

1. In Shopify Admin, go to Settings → Metafields and Metaobject → Variants

2. Under Variants, click Add Definition.

3. Fill in the following fields:

For example: 

• Name: Color Description
• Namespace & Key: custom.color_description
• Description: Provide a unique description for each color variant of the product, displayed on the product page.
• Content type: Text (or Image if you want to upload a variant-specific image)
• Optional: Set validation rules (e.g., max characters)
  

4. Click Save.

After this, each variant will have a field to input its metafield value.

Step 2: Add Values to Variant Metafields

1. Go to Shopify Admin → Products → All Products.

2. Select a product with multiple variants (e.g., “Classic Cotton T-Shirt”).

3. Scroll down to the Variants section. For each variant, you will see a Metafields area.

4. Enter values for each variant:

• Red → “Vibrant red color inspired by summer tones.”
• Blue → “Calm ocean blue for a relaxed look.”
  
• Green → “Fresh mint shade perfect for daily wear.”

5. Click Save.

Each variant now has its own unique metafield data.

How to Display the Variant Metafield in GemPages

To show variant metafield values on your GemPages product pages, you need to use a Custom Code element with Liquid referencing the variant object.

Step 1: Open GemPages V7 Editor for your product page.

Step 2: From the left sidebar, drag a Custom Code element to where you want the variant description to appear.

Step 3: Click the element to open the code panel.

Step 4: Paste the following Liquid snippet:

{% assign ns = ‘YOUR_NAMESPACE’ %}

{% assign key = ‘YOUR_KEY’ %}

<div id=”variant-meta”>{{ current_variant.metafields[ns][key] }}</div>

<script>

(function(){

  var VM = {

    {% for v in product.variants %}

      “{{ v.id }}”: {{ v.metafields[ns][key] | json }}{% unless forloop.last %},{% endunless %}

    {% endfor %}

  };

  var el = document.getElementById(‘variant-meta’);

  function getVid(){

    var x = document.querySelector(‘input[name=”id”]’);

    return x ? x.value : null;

  }

  function update(id){

    if (!el || !id) return;

    el.textContent = (VM[id] != null) ? VM[id] : ”;

  }

  // init + listeners

  update(getVid());

  window.addEventListener(‘load’, function(){ update(getVid()); });

  document.addEventListener(‘change’, function(){ update(getVid()); });

  document.addEventListener(‘variant:changed’, function(e){

    if (e.detail && e.detail.variant) update(String(e.detail.variant.id));

  });

})();

</script>

Step 5: Click Save and Publish.

Step 6: Preview your product page: when the customer selects a color variant, the correct Color Description will display.