PRODUCT - Adding different tabs per product
If you want to add the same tabs to all your products (this is useful for shared information like shipping information), please refer to global tabs by clicking here.
You are looking to add per-product information (like specifications, ingredients...)? If so, unique tabs are the answer to this problem. Unique tabs allow you to create pages that are attached to your products using a tag mechanism.
IMPORTANT, PLEASE READ THIS BEFORE: for Prestige, the instructions are different based on the version. To know more about which version of the theme you are using, please click here to see the instructions. Then, make sure to select the instructions that apply to your version. Using instructions that do not apply to your version will not work.
I am using...
Prestige v5, Warehouse v2 or Focal v8
Open the settings of your Shopify store, and click on the "Metafields" section:
Click on "Products":
We will need to add two metafields: one for the tab title, and one for the tab content. To do that, click on "Add definition" button to add a new metafield. For the name, enter for instance "Tab 1 title" (you can enter any name, but it is a good practice to use a meaningful name so it is easier to edit in the future). Click on "Select content type" and choose "Text" in the dropdown:
Then select "Single line text", and save the metafield:
Repeat the process to create a new metafield definition, but this time name it "Tab 1 content", choose "Text" in the dropdown:
For the content, because we usually want to type longer text, select "Multi line text" this time, and save the metafield.
You should now see the two metafields being created:
Now that we have created the metafields, we will need to connect them in the theme editor.
To do that, open the theme editor and choose "Product pages" in the page selector at the top:
Then, click on the "Default product" template:
In the product section, click on "Add block" and select the "Content" block (the block may differ depending on your theme, but you should find a "Content" block):
Once added, Shopify will reveal the block settings. We will first connect the title to the tab title metafield we have created. To do that, next to "Title" click on the small database icon:
Select "Tab 1 title" (or whatever you have named it):
Then, we will connect the content. To do that, next to the content, click on the small database icon:
This time, select "Tab 1 content" (or whatever you have named it):
Make sure to save the various settings inside the theme editor.
We have now successfully created the metafields, and connected them to the theme editor. But for now, no content appear. This is because we have not yet configured the content for the products. To do that, open Shopify admin and select your product in the "Products" part of the admin:
At the very bottom of the product in the admin, you will now find a new "Metafields" category, showing all the metafields you have created in step 1. In our case, we are interested in the "Tab 1 title" and "Tab 1 content" metafield. Click on it to select the content you want to show for this product. Finally, save the product.
If you wish to create more than one tab, you will need to repeat the process, by creating two new extra metafields (that you can call for instance "Tab 2 title" and "Tab 2 content") then creating a new block in the editor and connecting those two metafields, and then filling the data in the Shopify admin.
Prestige v1, 2, 3, 4 ; Warehouse v1, Focal v7, Trademark, Kagami
Create a new page in Shopify admin. This page will hold the content of your unique tab. You can create a page in the "Pages" section of your Shopify admin.
Once you have created your page, we need to retrieve the page handle. To get the page handle, open the page in the admin, and at the bottom, you will find a box called "Search engine listing preview".
The handle is what comes after the "/pages/" segment in the address. In this example, the handle is simply shipping:
Make sure to write down the handle, we'll need it later.
Then, we will need to inform the theme that we want to display this page's content as a tab for a given product.
To do that, in your Shopify admin, open the product that you want to edit. At the bottom right of the product page, you should find a section called "Tags". We are going to add a special tag that allows to instruct the theme to use our page.
For using the first unique tab, you will need to add the tag __tab1:handle (where handle must be replaced by the handle of the page you want to link). For the second unique page, you will need to add the tag __tab2:handle.
IMPORTANT: Make sure that your tag starts by TWO CONSECUTIVE UNDERSCORES. If your tag starts by one underscore, it will not work!
To take our previous example, the tag would simply by __tab1:shipping:
Repeat the process by creating new pages, and attaching them to your products.
Finally, we need to configure the theme. The process slightly differs based on the theme you are using.
For Focal, Trademark, Prestige and Warehouse themes, you have nothing else to do. As soon as you add the tab to your product, it will automatically appears in the product page.
Kagami allows you to re-order product tabs. Because of that, the theme cannot know in advance where to display the unique tab. Therefore, we are going to need to manually add the tab.
To do that, in the Theme Editor, navigate to a product page, so you can have access to the dedicated Product section setting.
Then, click on "Add content", and select either "Unique tab 1" or "Unique tab 2":
If you add the "Unique tab 1", it will displays the page attached to the __tab1:* tag. Similarly, if you add the "Unique tab 2", it will displays the page attached to the __tab2:* tag.
Avoiding usage of page
This is pretty nice, however this requires the usage of a lot of pages. Hopefully, our theme comes with a more advanced feature that allows you to add unique tab without the usage of page. You can learn more here.