Links

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.
Metafield 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.
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] Kalles Partner Plan

Don't have to be tech-savvy, you surely can create your powerful and eye-catching store with EComposer - Visual Page Builder app (Our free add-on for Kalles):
  • FREE 100% lifetime (save you $150 annually)
  • Build any essential Shopify pages & Landing page, Sales Funnel Page, Lead pages, etc. tailored for your marketing campaigns, ads.
  • Create advanced sections & add to Kalles with ease
  • Anyone can build pages with live drag-drop editor
  • Publish up to 15 pages
  • 24/7 livechat support
Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Kalles+EComposer” to upgrade for FREE.
Cheers, The4.