The introduction of metafields with OS 2.0 added a new depth to Shopify themes and allowed an easier setup for merchants to be able to add unique content to their products beyond the base product description. This guide shows how to use metafields in our OS 2.0 themes to add product specific tabs or accordion panes.

Creating Metafield definitions

A Metafield definition is an entry that will become visible in the product admin, you will create a definition for each additional piece of content you are adding.

For each tab or accordion pane you will need a minimum of 2 Metafield definitions, one for the clickable tab label and one for the content that is displayed when that is clicked.

First we are creating the first Tab title.

In the main Shopify admin click on Settings and choose Metafields
under New fields for your store select: Products

On the next page click the Add definition button.
In the text fields that appear add the following to the relevant fields:

• Name: Tab 1 title
• Description: Tab 1 title

Leave the Namespace and key areas alone, they will automatically update based on your entries. You should have the following:

Click on Select content type and from the options choose: Text > Single line text

Click save when done.

Now we are adding a metafield for the tab content. Click on Add definition again.
this time in those text fields enter:

• Name: Tab 1 content
• Description: Tab 1 content

Again leave the namespace and key alone as this will auto update.

Click on Select content type and from the options choose: Text > Multi-line text

Click save when done.

Repeat this process for Tab 2, 3, and more depending on how many tabs you need for your products that will be showing unique product specific content.

When ready open a product in your store admin and scroll to the bottom of the page, where you will see the metafields that you have created. 

Click on each and enter the content for your product, click save when done.

 Adding metafields to the theme content

In your admin open: themes > customize theme to open the theme editor.
While in the theme editor navigate to a product that you have added metafields to.

In the product section add an Accordion or Tab content block ( depending on your themes options ). Next to the title and content areas for those blocks click on the dynamic source icon and choose the relevant content which will fill those fields.

Once both title and content have been selected those fields should look like this:

That content will now be updated and reflected on your product page. Repeat for additional tabs and their content.

This adds product relevant content to your product pages without the need for apps.