Product Variant Metafield
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
If you're managing many products with diverse variants, each requiring specific information to be displayed, using the product variant metafield element will perfectly meet your needs. It’s a powerful solution for targeting customers effectively and optimizing your store's conversion rate. With just 3 steps you can display elements on your online store: creating a variant metafield with Shopify, configuring elements, and finally, publishing your page.
If you don’t have PageFly yet, you can install it for Free .
You can refer to our video tutorial
This is a 3-step tutorial that creates variant metafields: creating definitions, adding values to metafields, and displaying them on your page.
Create A Variant Metafield Definition
Step 1: From Shopify Admin, go to Setting > Custom data > Variants.
Step 2: Click Add definition and fill in the fields including: Name, Namespace and key (optional), and Description (optional).
Step 3: Click Select type > Select the content type that best matches your metafield from the list > Set validation rules and additional configuration. There are two types of variant metafield values: One value and list of values.
One value: is just one piece of data, like a string of text, a number, or a date.
List of values: is a collection of single values. This could be a list of colors, for example.
Step 4: Click Save. You can organize variant metafield by pinning variant metafield definitions.
Add Values To Variant Metafields
Step 1: From Shopify Admin, go to Products > Click a Product > Click a Variant you want to add more content.
Step 2: In Metafields, add the content you want to display following the content types.
Step 3: Click Save.
Repeat the steps above to add values to your metafield in other product variants.
Step 1: From PageFly editor, click on Elements icon> go to Shopify tab > in Product category > Product variant metafield > Drag and drop element to the editor canvas.
Step 2: Select element > Go to General Tab > Content > Select Product source and Variant metafield definition. If you add the Variant metafield into a Product details element, the Product source will be set to auto.
Step 3: From Variant metafield definition > Click Select definition > Select a variant metafield definition in modal > Click Select.
From PageFly editor > Click on the Product Variant Metafield element > General tab > Config Content parameter group of element:
Product source
Auto: If the Product variant metafield element is nested inside the Product details element.
Auto (by default) or Custom: If the Product variant metafield element is nested outside the Product details element and on the Product page.
Custom product: If the Product variant metafield element is not nested inside the Product details element and is on a non-product pag
Variant metafield definition This parameter specifies which part of your store a variant metafield applies to and what values the variant metafield can have.
Show label This is the name of the variant metafield shown by default.
Label position The position of the label can be on the left (by default) or above the values.
Product variant metafield element includes two sub-elements: Variant metafield label and Variant metafield value.
This sub-element configures the name of the variant metafield. If not specified, it defaults to the name of the variant metafield definition.
General Configuration
From PageFly editor > click on the Variant metafield label element> Head over to General tab > Click on the input field and type the label of variant metafield.
Styling Configuration
This sub-element configures the values of the variant metafield. Depending on your selected content type of variant metafield definition, a relevant parameter group will be available with variant metafield value.
General Configuration
PageFly currently supports 15 content types:
Date and time You can use this type to add launch event dates or product release dates.
Date This type can be used to add product expiration dates or order delivery dates.
Dimension The Dimension type can be used to add box heights or product lengths, such as the length of a scarf.
Volume You can use the Volume type to add the volume capacity of a water bottle.
Weight An example for using the Weight type is to add the weight of a product or ingredient.
Decimal This type can be used to add a carat weight for jewelry.
Integer The Integer type can be used to add a page count for books.
Multi-line text The Multi-line text type can be used to add shipping notes or return policies.
Single line text The Single line text can be used to add short notes and announcements.
Rich text The Rich text type can be used to add long-form stories about your brand or product, including styling.
True or false This type can be used to add whether an option is available, such as whether an item can be engraved.
Color Color type can be changed to match the color of each product variant.
Rating The Rating type can be used to add an audience score or a star rating for a product.
URL The URL type can be used to add a link to book reviews or product videos that are hosted on a specific website.
Money The Money type can be used to track product cost details, such as distributor cost or ship to warehouse cost.
List date and time:
Marker type (exclude Color type)
Marker position (exclude Color type)
Text indent (exclude Color type)
Adjust:
- Show date
- Date format
- Show time
- Time format
- Show time zone
Styling Configuration
This happens due to a few reasons:
The product being displayed has no variants
You are not select Variant metafield definition to show
The product source of the element is "Custom product," but you haven't selected a product to customize.
Because your variant metafield definition has no value. To resolve this message go to Shopify Admin > Products > Variants > Metafield > Define values.
If you select “Delete definition field only", the element is still displayed normally in live view, but there is no variant metafield label if you don’t customize it.
If you select “Delete field and its saved values", content will no longer be visible anywhere.
1. What is the difference between Product Metafield and Product Variant Metafield?
Product variant metafield can be used to store details related to a particular variant, like if we have Red and Green variants we can have different information for each variant.
Product metafield can be used to store details related to the product and it will be the same for all the variants of that product.
Or check out from Shopify for more information about the metafields.
You can also get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters .
The Styling configuration for Product Variant Metafield element will follow the PageFly element styling .
The Styling configuration for Variant Metafield Label element will follow the PageFly element styling .
There are no special settings for this type.
There are no special settings for this type.
There are no special settings for this type.
There are no special settings for this type.
There are no special settings for this type.
- Link to URL: Makes the link clickable - Text link: Enter the anchor text you want to display for the link
The Styling configuration for Variant Metafield Value element will follow the PageFly element styling .
