How to add product metafields to your page

This article will walk you through steps on how to create a Product Metafield and show it on your page. 

What is a Metafield?

A Metafield allows you to add information to your store that isn't included in the standard Shopify configuration. The most popular is Product Metafield. It will enable us to display more details about each product on the product page.

For more information about the metafields, check out this article from Shopify.

Create the Product Metafield with Shopify

Add Product Metafield definition

First, you will need to create a custom product metafield by following steps:


Step 1: From your Shopify Admin, go to Settings > Metafields. Under the Custom fields, select Product.



Step 2: Next, click on “Add Definition”.



Step 3: Fill in Name, Namespaces and key, and choose content type. The Description field is optional.


Hit “Save” when finished. 

Add value to the metafield

Once you’ve successfully created the product metafield, you may notice that it has been added to your product settings. Then, to add value to your recently created metafield, follow the steps outlined below.

Step 1: Go to Shopify Admin > Products and select the product you want to add more information through metafields.


Step 2: Scroll down to the Metafields section on the product setting page.



Step 3: Input the value into the field. Don’t forget to hit “Save” when finished. 



Display the Metafield on your page

Step 1: Come back to Shopify Admin > Settings > Metafields > Product and locate the Metafield you want to display on your page. 

Next, copy the line of code below the name. 



Step 2: Go to GemPages Dashboard > Product pages, select the preferred template to enter the Editor.


Step 3: From the left sidebar, drag & drop a Liquid element onto your preferred spot on the page. 



Step 4: Right-click on the Liquid element and select Edit Code



Next, paste the code you copied earlier to the Template panel. Please note that the code should be placed between {{ }}.


For example:



Step 5: Hit “Save” and check the preview page to see how it looks. 



Need more help? Feel free to reach out to our Customer Support Team via email and live chat!

Was this helpful?