Extending product details with metafields

In our Iridium theme demo that is focused on Wine and Alcoholic beverages we harness the power of Shopifys built in metafields to provide a wide range of filters and deeper more informative product details. Those details include Wine regions, Alcohol by volume (ABV) and taste notes, among many more.

Metafields allow you to add more detail to yoyr content. For instance for our demo we needed to create information fields for products that can be shown outside of the product description, for each of these we created a metafield. These metafields can be seen on the product pages and also on collection pages inside the product filters.

Setup of these additional fields is very simple with the following steps:

Creating the metafields

1. In your main store admin on the bottom left of the screen click on Settings
2. When the settings menu opens click on Custom data which will load your metafield definitions
3. Click on Products followed by Add definition
4. Add a name and a description. The namespace and key will be generated automatically based on the name of your metafield.
   
   
   
   
   
5. Clock on Select type and choose Single line text
6. Click Save
7. Repeat the process for other product details that you want to add. For the purpose of our demo we created metafields for:
   ABV, Body, Taste notes, Region, and Country, you may add as many as you need. You can add more at any stage.

Adding product specific details to the metafields.

Once you have created the metafields we need to add some content to them which will be displayed in your store. To do this we need to work within the products area of your store admin.

1. If your settings window is open, close it and in the left sidebar click on Products
2. Open a product that will use your new metafields, when the page loads scroll down to the pane named Product metafields here you will see all of the metafields that you have created.
3. Add your content to each metafield and click save
   
   
   
    
4. Once you have added the metafield content to your products we will not setup the theme to display them.

Showing metafields on the product page

The Forge Shopify theme has a product details section which is perfect for showcasing product information in a list format that is easy for customers to digest. This proves valuable in the themes flexibility to work in many industries with this area being used for product specifications, ingredients and more.

1. In your store admin click on Online store followed by themes
2. In the themes overview page next to the Forge theme click on Customize theme
3. When the theme editor opens navigate to a product page.
4. Once inside the product page editor in the left sidebar you will see the Product details section. 
5. Inside the product details section click on Add block and choose Richtext
6. Once added click on the Richtext block that you have just added which will allow you to edit its content. First add a label, this will be shown on the left of the product details section.
7. To add content click on the Connect dynamic source icon which will show a list of the product metafields that you have created.
   
   
   
   
8. Select the metafield that corresponds to your label, you will see the content now includes the metafield with the dynamic source icon.
   
   
   
   
9. When done click the back icon at the top of the block and add additional rich text blocks to place more metafields into the product details area.
   You will see these metafield richtext blocks appearing on the screen in the product details section. Click save in the theme editor when done.

Setting up metafields within product filters

If you want your customers to be able to filter products on a collection page by these metafields you will need to add Shopifys search and discovery app.

1. When installed open the Apps section of your Shopify admin and click on filters followed by Add filter
2. Click on the source field and a dropdown will appear showing all product data that can be used for filters. Under product metafields select each of the values that you would like to appear in your collection filters and save.

This will now allow you to show extended details on your product pages along with the additional functionality of being able to filter by those features. Our support team will be happy to assist if you have any questions or are struggling with this tutorial.