Showing Metafields In your Shopify Store Theme

After metafields are created , you need to customize your Shopify theme in order to show metafields in your store.

Below is an example on how to add a metafield to your Shopify product page.

Create Metafield

We have a metafield with the namespace product_extra and key country_of_manufacture. First go to Metafields Editor and find your product and then click on Add next to the product title to add a new metafield. Click on the blue Add button to finish. See example below of creating a new metafield.

Now the metafield is saved. You are ready to go to next step by customizing your theme.

If your theme is Shopify OS 2.0 (With OS 2.0 label in the theme store) enabled, follow instruction below. If your theme is not OS 2.0 enabled, jump to instruction here.

For Shopify OS 2.0 Themes

This example use the free theme Dawn provided by Shopify.

• Log into your Shopify admin area and click on Online Store from the left menu, Themes

• Find the Dawn Theme and click on customize.

• You are now in theme editor. Switch the top selector to Product and choose a product so we can add a new section to the product page

• We will add the metafield as a new block to the product page. A block is an area in your product page. It can contain text, image or other type of content. On the left of the theme editor, find the section product information click on it to see current blocks in this section. At the bottom , there is an option Add Block. Click on Add Block

• Check the listing under Apps. These the theme extensions our app created. They are Dynamic Text Metafield, Image Metafield, Link Metafield, Simple Product Block, Text Metafield.
• Simple Product Block: The most flexible block as it does not require usage of metafield definitions.
• Dynamic Text Metafield: Use this to select a metafield that has a metafield definition. It is for metafield value that contains text values.
• Image Metafield: Any Metafield can be selected. Display metafields that hold a url to view an image.
• Link Metafield: Any Metafield can be selected. Display metafields that hold links to a url.
• Text Metafield: Any Metafield can be selected. Display
• metafields that holds text.

• The new block you have chosen is added to the bottom. Click on the name Dynamic Text Metafield or other supported block names to configure the block. Example below is for Dynamic Text Metafield Block.

• You will now see a few options to configure. The screenshot below is for Dynamic Text Metafield. Click on the Disk Icon next to 'Metafield" to choose the metafield to display. The metafield listed here will need to be first defined using Metafield Definition . 
  

If you choose other block like Text Metafield, you can use metafields without metafield definition and enter Namespace and Key of the metafields. See example of a Text Metafield

• After selected the text based metafield you want in the Dynamic Text Metafield,  put in a label "Country of manufacture: ". After these, the themes editor will show your new block the the label and the value of the metafield .

• Simple Product Block supports a few customization options and does not require the usage of metafield definitions
  • Add a text label to your metafield value when displaying as text. See below.
    
  • You can display your metafield value as text, image or a link to a URL using the Display As option. See options below.
    
    
    
    
  • Use the color option to customize the color to used when displaying as Text or Link. See below.
    
  • When displaying the value as an image in Simple Product Block (the value must be a link to an image url that is publicly available on the Internet), you can control the size of the image by using the width (enter number only which is in pixel) option. You can also enter Alt text for the image. It is not required but generally you should put in a description of the image. See example below
    
  • When display the metafield value as link in Simple Product Block. Enter the actual text a visitor will click on in Link text. See example below
    
    
  • If you want to style this block using your store's CSS, enter the CSS class to assign to this block in CSS class block
    
    
  • 
• Your changes are auto loaded in the theme editor but do not forget to save it by clicking on Save at top right corner of the page. The right side of the theme editor shows what your changes look like. We added it just below care instruction but you can reposition it anywhere. See example below what the finished page looks like.  

This is a very simple change to add to your product page. To learn more about Shopify 2.0 theme editor, see Shopify article here

For non 2.0 Themes

This example use the free theme Simple provided by Shopify. Please note instruction here is for you education purpose. Since we are not the author of the theme, you should contact Shopify for theme customization. Some advanced changes might have to be done by Shopify experts who are well versed in Shopify themes and their capabilities. 

• Log into your Shopify admin area and click on Online Store, Themes

• Find your theme. This example uses the free theme "Simple".  click on Actions and choose Edit Code.
• We need to find this file called product-template.liquid in the theme . Type in product-template in the search box and locate the file. Click on product.liquid to see detail of this file. See below. If your theme is not Simple. The name of the file to edit might vary and it mostly will have the name product in it. Contact the theme author to locate the file to edit.
  
  
• We are now looking at the content of the product-template.liquid file. We need to find a place to insert a line of Liquid text. Liquid is the markup language used in Shopify theme.  It is impossible to explain liquid in detail in this article. You also need to have some knowledge of HTML which is the language of the web. This example put the extra text at the bottom of the product page. See highlighted text below. But you may choose to locate it anywhere. We use <div>...</div>  to wrap our content to conform to HTML 
  
  

• Put the text below as Liquid. Text are enclosed by 2 left curly bracket and 2 right curly bracket is used to output the value of the metafield created earlier. 

  Example :  
  <div> 
    Country Of Manufacture:{{product.metafields.product_extra.country_of_manufacture}}  
  </div>

  To output metafield value {{ product.metafields.namespace.key }}

  Replace namespace and key match exactly with what you created the metafields. (Namespace and key are case sensitive). "Country of Manufacture: " is the label. You can put in free form text here.

There you have it. It is definitely easier to do the theme changes with Shopify OS 2.0 themes as it has an improved UI so you do not need to go deep into HTML and liquid.