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, please click Settings > Custom data > Variants

Step 2:

Click add definition, you need to configure some options below:

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

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

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

• Select Content Type: you can choose Single-line text or Multi-line text.

Please follow this video:

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.

Step 4:

4.1. To show Variants in the Product Information

Go to Theme customize > Product page > Product main > Add block > Custom Liquid.

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 -%}

Result:

4.2. To show Variants in the Product Tab

Go to Theme customize > Product page > Product main > Add block > 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 -%}

Result:

[Private Offer] EComposer Partner Plan

Exclusively for Belyn 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 Belyn 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 “Belyn+EComposer” to upgrade for free

Cheers,

The4.