This guide will help you create unique tabs on your product page so that you can add unique details for each product with the use of metafields.
Introduction
In this section you will learn how to:
- Add code that will enable unique product tabs
- Setup unique product tabs
1. Add code that will enable unique product tabs
From the Shopify Admin:
- Click "Online Store"
- Next to your copy of Loft, click "Actions"
- Click "Edit code"
- In the left sidebar, scroll down to "Snippets" and click to open
- Click the file called "product-description.liquid"
- Select all the text and replace it with the contents of this file here
2. Setup unique product tabs
- Once the code from step 1 has been added you will need to install a metafields editor. We suggest installing the Poshify Utilities chrome extension.
- The metafields you'll want to use on the products are listed below:
tab2.content
tab3.content - Now, if the product has a specific metafield, that content is what shows in the respected tab. If it doesn't, then the tab will just show the content setup in the section settings
- Add the metafields to your product by going to your Shopify Admin and clicking on the Poshify Icon in your Chrome Browser (it looks like this:
) - Click "Metafields Editor"
- This will load the products in your scroll. Locate the product you'd like to add unique tabs to, and click on it. The metafield editor will now appear.
- Click the "Select metafield" dropdown, and click "Create new metafield"
- Create the metafields by adding their info. (i.e. For tab2 you have to add Namespace->tab2, Key->content, Content->The content that you want to be displayed on the related product)
- Click "Create" on the metafields editor
- Click "Save" on the product editor
- For a third tab, follow the steps above and replace the number 2 with 3
Once the steps above are complete, your theme should now be showing the Metafield content. If you run into trouble with this guide, please don't hesitate to reach out to us.