API show metafields for Product Variants

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:

You need to create Metafields for Variants, From Shopify backend, go to Settings > Custom data > Variants > Add definition

Step 2:

You need to configure some options below:

• Name: You can add any name here. Example: Custom vatiants

• Namespace and key: you can add any key here. Example: theme.variant

• Description: You can add any text for the description.

• Select Content Type: This is a required option, you have to choose Single-line text or Multi-line text

Step 3:

When you added Metafields Variant to config Product Variant with Metafields, please click on Products > Variants > Edit. Then scroll the page to Metafields and fill the code or text that you want.

Add Custom Liquid

Step 4:

4.1. To show Variants in the Product Information, you 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.id}}">{{variant.title}}: {{ variant.metafields.theme.variant }}</div> 
       {%- endif -%}      
   {%- endfor -%}

Show Variants In The Product Information

Result:

4.2. 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 is 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.id}}">{{variant.title}}: {{ variant.metafields.theme.variant }}</div> 
       {%- endif -%}      
   {%- endfor -%}

Show Variants In Product Tabs

Result:

[Private Offer] EComposer Partner Plan

Exclusively for Gecko users, 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, Sales Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.

• Create advanced sections & add to Gecko with ease

• Save up to 50 pages/sections

• 100+ professional, stunning pre-designed templates

• Anyone can build pages with live drag-drop editor

How to claim offer: Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Gecko+EComposer” to upgrade for free

Cheers, The4.