How to Add Product Metafields to Your Shopify Page

What is a Product Metafield in Shopify?

A Shopify Metafield allows you to store extra information about your store’s content that doesn’t fit into the default fields. One of the most widely used types is the Product Metafield — perfect for adding unique specifications like skincare types, nutritional info, ingredients, or even image URLs for custom badges.

If you’re looking to display personalized product details or enrich your Shopify product pages with custom data, metafields are your go-to solution.

How to Add Product Metafield in Shopify

Step 1: Create a Product Metafield in Shopify

To use a metafield, you must first define it in your Shopify Admin.

• From your Shopify Admin, go to Settings > Metafield and Metaobjects > Products.

• Next, click on “Add Definition”.

• Fill in Name, Description, select Content type, and select Categories.

• Hit “Save” when finished.

Step 2: Add Metafield Values to Your Product

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.

• Go to Shopify Admin > Products and select the product you want to add more information through metafields.
• Scroll down to the Metafields section on the product setting page.

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

Step 3: Display the Metafield on your page

• Return to Shopify Admin > Metafields and Metaobjects > Product and locate the Metafield you want to display on your page.
• Next, copy the line of code in the Namespace and key section.

• Go to GemPages Dashboard > Product pages, select the preferred template to enter the Editor.

Starting from this point, the steps may differ based on the specific version of the editor you are using. Please locate the instructions that correspond to your GemPages version and proceed with the following steps accordingly.

If you are using GemPages V6

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

• Right-click on the Liquid element and select Edit Code.

• Next, paste the code you copied earlier to the Template panel.

Please note that you should add product.metafields. before the line of code you just copied, and the code should be placed between {{ }}.

For example:

{{product.metafields.my_fields.skintype}}

• Hit “Save” and check the preview page to see how it looks.

If you are using GemPages V7

• Locate the Custom Code element on the left sidebar, under the Advanced section. Drag and drop it to your preferred location.

• Click on the element to reveal the code panel on the left sidebar. Paste the code you copied earlier to the HTML panel. You also need to add the prefix product.metafields. before the line of code you just copied, and the code should be placed between {{ }}.

For example:

{{product.metafields.custom.product_test}}

• Hit “Save” and “Publish” to check the result on your live page.

How to Connect the Image Source to a Metafield?

Shopify also supports image metafields, but rendering them on your page requires custom HTML code.

If you have already created image meta fields for your product, do feel free to share which meta field you’d like to display and its expected position with us for further assistance.