API show metafields for Product Variants

This is a new feature added in the new update Kalles 4.0.4. 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 > Metafields > Variants.

Step 2:

You will add definition, then enter the name, namespace and key, and Select content type. With Content type, you can select Single-line text or Multi-line text; with name, namespace and key, you can enter the name you want, it is not required to enter the exact key.

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

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

Result:

[Private Offer] EComposer Partner Plan

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

Cheers, The4.

Last updated