Add Product Metafield to 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.

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 > Custom Data. Under the Metafields, select Product.

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

Step 3: Fill in Name, Namespaces and key, and select 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: Return to Shopify Admin > Custom Data > Metafields > Product and locate the Metafield you want to display on your page.

Next, copy the line of code in the Namespace and key section.

Step 2: 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 Version and proceed with the following steps accordingly.

Version 6

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 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}}

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

Version 7

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

Step 4: 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}}

Step 5: Hit “Save” and “Publish” to check the result on your live page.

How to connect the image source to a meta field?

Regarding meta fields, displaying image-type meta fields requires some custom 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.