Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

API show metafields for Product Variants


Written by Annie

Last updated


On this page

This is a new feature added in the new update from Kalles 4.0.4, Gecko 6.0 and Unsen 1.0. Variant metafields can display different information depending on the selected variant. You can use the metafields object to display the information on you product page using simple Liquid code.

Step 1: Create metafield

Please click Settings > Custom data > Variants.


Click add definition.

  • Name: any name you want

  • Namespace and key: theme.variant

  • Select content type: select Single-line text or Multi-line text.

Please check this image:


You can follow this video to config it:

Step 2: Add metafield content to product variants

Click on Products > Variants > Edit. Then scroll the page to Metafields and fill the content that you want.

Step 3: Add to Theme customize

3.1. In the Product Information

To show Variants in the Product Information, go to Product Page > Product Main > add Custom Liquid Blocks.

Then paste this code liquid below.

Note: My namespace and key is "variant.metafields.theme.variant", you need to change your namespace and key here to show.

{%- for variant in product.variants -%}

 {%- if variant.metafields.theme.variant != blank -%}

 <div data-variant-toggle="{{}}">{{variant.title}}: {{ variant.metafields.theme.variant }}</div>

 {%- endif -%}

 {%- endfor -%}


3.2. In a Product Tab

To show Variants in the Product Tab, please add the Tab Custom Liquid block and paste this code below, you need to change the namespace and key by yours. With the product tabs, it requires this "data-variant-tab" code.

{%- for variant in product.variants -%}

 {%- if variant.metafields.theme.variant != blank -%}

 <div data-variant-tab data-variant-toggle="{{}}">{{variant.title}}: {{ variant.metafields.theme.variant }}</div>

 {%- endif -%}

 {%- endfor -%}


[Private Offer] EComposer Partner Plan

Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Cheers, The4.

We uses cookies to ensure you get the best experience on our website.