About Product Metafield element
The Product Metafield element is designed to display the metafield of your Shopify products on your page to increase your conversion rate. You can use the Product Metafield element to promote your products on any non-product page or use it on a product page.
You can watch our video tutorial to explore more about Product Metafield element in PageFly
Access the Product Metafield element
- Step 1: In PageFly editor, click on Add Shopify element.
- Step 2: Click on the Product Metafield element in the dropdown menu
- Step 3: Drag and drop the element into the page editor and then start using it.
Note that you can search for this element by using the search function instead of finding it in the sidebar.
Access Product Metafield on Shopify
You need to access Metafield on Shopify to set up and add definition for it. To access Metafield, go to Settings > Metafields.
There are 8 types of Metafield.
Note that PageFly only supports the Product Metafield.
After accessing the Metafield area, click on Add definition to add a new definition for the Product metafield.
In Add product metafield definition, there are three boxes that need to be filled: Name, Description, Select content type.
The Namespace and key will automatically take the text on the Name box.
There are 11 content types.
CONTENT TYPES | |
Color | ![]() |
Date and time | ![]() |
File | ![]() |
JSON | ![]() |
Measurement | ![]() |
Number | ![]() |
Rating | ![]() |
Reference | ![]() |
Text | ![]() |
True or false | ![]() |
URL | ![]() |
When finish setting for Metafield definitions, go back to Products area > All products > Click on product > Scroll down to Metafield section > Fill in the value.
Product Metafield element configuration
To see Product Metafield element’s parameters, you need to click on the element in the layout.
General Configuration
When you drag and drop the Product Metafield element into the non-product-details area, there are 2 choices of the Product Source option for you to choose from:
- Auto
- Custom Product
If you drag the Product Metafield element into the Product details area, the Product Source will automatically take the information from the Product details that contain it.
You can select metafield for the product in Metafield Name.
The Show Label parameter is to show and hide the metafield name.
When you enable this parameter, the Label Position will show up right below it. You can set for the label to appear on the left or on top of Product Metafield.
You can change the metafield name by clicking on it > go to General tab > Scroll down to Content > in Label text > Change the text of the metafield.
With Metafield value, depending on the type you choose, there are some parameters can be adjust by click in the Metafield value:
True or false: Adjust “True value” and “False value” content | ![]() |
Reference: Link or unlink to the page has been set up in Shopify | ![]() |
Date: there are 5 types of date format for you to choose | ![]() |
Web: Link or unlink to the web has been set up in Shopify | ![]() |
File |
|
With Rating, Number, Measurement, Delivery, JSON type there are no parameters for these types of Metafield value.
You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters.
Styling Configuration
You can check more information about the Styling tab