About Product Variant Metafield Element
If you’re dealing with many products and diverse variants, each needing specific information displayed, using the product variant metafield element will serve your needs perfectly. 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 here.
You can refer to this article from Shopify for more information about the metafields .
How To Create Variant Metafield With Shopify?
This is a 3-step tutorial that creates variant metafields: creating definitions, adding values to metafields, and displaying it on your page.
1. 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), 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.
2. 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.
Display Product Variant Metafield Element On Your PageFly Page
- Step 1: From PageFly editor, click Add Shopify Elements > Product category > Product variant metafield > Drag and drop element to the editor canvas.
- Step 2: Select element > From Inspector, click General Tab > Content > Select Product source
- Step 3: From Variant metafield definition > Click Select definition > Select a variant metafield definition in modal > Click Select.
For more details about the process, please check the video tutorial below:
How To Configure Product Variant Metafield Element With PageFly?
General Configuration
From PageFly editor > Inspector > Click General tab > Config Content parameter group of element:
Product source:
|
|
| 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. |  |
You can also get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here.
Styling Configuration
The Styling configuration for Product Variant Metafield element will follow the PageFly element styling here.
How To Configure Variant Metafield Label And Value In PageFly
Product variant metafield element includes two sub-elements : Variant metafield label and Variant metafield value.
Variant Metafield Label Configuration
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 > Inspector > click General Tab > Variant metafield label > Type the label of variant metafield.
Styling Configuration
The Styling configuration for Variant Metafield Label element will follow the PageFly element styling here.
Variant Metafield Value 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. |  |
| Marker type (exclude Color type) |  |
| Marker position (exclude Color type) |  |
| Items spacing |  |
| Text indent (exclude Color type) |  |
Styling Configuration
The Styling configuration for Variant Metafield Value element will follow the PageFly element styling here.
Common Issues
The Product Variant Metafields Element Not Display
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.
The Product Variant Metafields Element Display The Message “No Values”
Because your variant metafield definition has no value. To resolve this message go to Shopify Admin > Products > Variants > Metafield > Define values.
Deleting variant metafield definition
- 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.
Frequently Asked Questions
What Is The Different 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.
