How to display a metafield on product page

In this tutorial, we'll have a look at two different ways of displaying metafields on product page.

To start with, let's assume that metafield we're going to display is already created. If you don't know how to create a metafield yet, you may want to check out this article from our help portal.

For this tutorial, we've created a subtitle metafield with the following attributes:

1) type - multi line text;

2) namespace - additional_info;

3) key - subtitle;

4) value - (a dummy subtitle).

Now let's see the two different ways of displaying a metafield on product page.

Insert Liquid code in a theme builder

This method works for Online Store 2.0 themes only. If your store is operating on a non Online Store 2.0 theme, you may want to skip this method and jump to the next one. In this section of our tutorial, we're working with default Shopify OS 2.0 theme called Dawn. If some of the steps we'll use later are missing in your theme, you may want to contact your theme developer and ask them for further instructions.

Assuming that you're already logged in the admin panel of your Shopify store, navigate to Online store (1), then go to Themes (2), select your Online store 2.0 theme (3) and click Customize button (4):

Once you've entered a theme editor, scroll down to products and click on a test product (the one that has a metafield that you'd like to display) and click on this product to navigate to product page editor

On this page, you can see the structure of a product page template as a list of main blocks:

Our goal is to add a new block to this template and make it display the subtitle metafield:

1) click on Add block button

2) Select Custom liquid option:

3) Place this block in preferred part of a product page template by dragging it up or down:

Since we're working with a product subtitle, I'm going to place it right under the product title:

Now we need to add Liquid code to make our metafield visible on product page:

To get the Liquid code for our metafield, you need to go back to a product you've created that metafield for and get a code by clicking More actions (1) and Copy liquid code (2) buttons:

Once the Liquid code is copied to a clipboard, go back to theme editor and paste that code into the Custom liquid box (1). Then you'll see a metafield content displayed in the product page preview window (2). Finally, click Save button (3):

Why not just use the default "Insert dynamic source" fuctionality provided by Shopify? In order to use a metafield as dynamic data source, you need to create a metafield definition first. Sadly, metafield definitions have two major drawbacks:

1) there is a limit of total number of metafield definitions set to 100;

2) those fields don't support HTML. If you add a metafield with a HTML content, its value will be printed as plain text instead of formatted text.

However, if you use this method, you'll be able to avoid the aforementioned issues.

Insert liquid code directly in product page template file

This is a more advanced method for those who need more precision in positioning the custom metafield block. Yet another cool thing is that this method work just fine for both Online Store 2.0 and "old" themes.

To start with, you need to navigate to Online store (1) , then go to Themes (2). Once there, click on Actions button (3) to reveal the drop-down menu and select the Edit code (4) option:

Great, now you can see the internal structure of your theme:In this tutorial, we're working with default Shopify theme called Debut. If some of the files we'll use later are missing in your theme, you may want to contact your theme developer and ask them what files do you need to edit instead.

Go to Sections (1) and find the product template file. In our case, the file is called "product-template.liquid" (2). Once there, find a perfect spot to place your metafield. Since we're going to add a product subtitle, let's find the product title section (3) and place our metafield right below:

To get the Liquid code for our metafield, you need to go back to a product you've created that metafield for and get a code by clicking More actions (1) and Copy liquid code (2) buttons:

Once the Liquid code is copied to a clipboard, go back to theme editor and paste that code into your perfect spot of product page template file (1) and click Save button (2):

Once it's done, go to a test product and see the metafield in action: