Shopify element – Product Metafield

About Product Metafield elementClick to copy

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 elementClick to copy

  • 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

shopify product metafield

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.

shopify product metafield

You can select metafield for the product in Metafield Name.

shopify product metafield

The Show Label parameter is to show and hide the metafield name. 

shopify product metafield

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.

shopify 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.

shopify product 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 Image Reference type: can select Image size

  • With File Reference type: there are 3 parameters can be adjust: Button text, Show Icon and Enable full width

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

Navigate this category

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Boost Father's Day Sales: Utilize PageFly's templates to create captivating pages that drive results - Discover Now