PRODUCT - Adding different tabs per product

In  this article, we have explained how you could add global tabs to your product pages. Global tabs are tabs that are shared for all your products.

However, sometimes, it's useful to be able to create tabs that are only for one product. For instance, you may have specifications that are different to each product.

To that extent, our themes offer a feature called "unique tab". Unique tabs allow you to create pages that are attached to your products using a tag mechanism.

Step 1: page creation

In order to take advantage of unique tabs, first, you will need to create a page. This page will hold the content of your unique tab. You can create a page in the "Pages" section of your Shopify admin (if you are already logged, you  can click here directly).

Once you have created your page, we need to retrieve the page handle. To get the page handle, you need to 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 "about-us":

Make sure to write this handle somewhere, we'll need it in step 2.

Step 2: linking this page to a product

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:page-handle. For the second unique page, you will need to add the tag __tab2:page-handle. Pay attention, the tag starts with two consecutive underscores! If you only write one, it won't work.

To take our previous example, the tag would simply by __tab1:about-us:

You will need to repeat the process by creating new pages, and attaching them to your product pages.

Step 3: configuring the theme

The process is slightly different for our themes.

Focal and Trademark

For Focal and Trademark 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

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 the 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.