How to Set Up Global and Unique Product Tabs
In this article, we will cover how to create unique and global product tabs.
Setting up unique tab content for individual products
Previously, creating unique product tabs for required using an app. But in our latest theme versions (v2.6.0+) we simplified this by enabling the use of product tabs that are activated by adding the H6 block in your Product page description.
Here are the steps to set up the unique product tabs:
Step 1: Enable the Description H6 within the product settings
(i) In the Shopify theme editor, navigate to the Online Store >> Themes >> Palo Alto >> Customize >> Product pages and open the product page settings.
(ii) In the product page settings tabs section, enable the option “Description H6”.
Step 2: Setting up your tab title and content
(i) Navigate to the product setup in the main Shopify Admin:
(ii) Select a product for which you would like to have the tabs added.
(iii) In the products description section, add any information that you want to appear before the tabs. Tabs must be the last thing you add to a product.
(iv) Write a title to your tab and make it a H6 font style.
In this case, “Feature” will be converted to a tab title
We recommend that you create clean titles. Don't copy/paste the titles from another source. Titles must be clean in order to work. You can always look at the HTML in the product description and verify that your titles look like:
<h6>Tab title</h6> <br>
(v) Add the tab content to the new tab
All the content you add below the title will now become the content of your tab. You're not limited to just text, you can add photos and embed videos.
(vi) Creating additional tabs
Once you add the content for your first tab, you can add additional tabs by first creating a new tab title (write the title, highlight it and make the font a Heading 6). This indicates a new tab is starting. After adding the title, you can then add the tab content. Steps (iv) and (v) are repeated in this scenario.
There's no limit to how many tabs you can create except space. Once the tab titles get too long, they automatically get converted to Accordions.
Setting up global tabs for products
Global tabs are shared across all products.They are used to render content that is similar to all products such as shipping information.
The theme supports adding of these tabs via pages. To set them up, you will need to carry out the following:
Step 1: Adding pages and their respective content
Access the pages section within your Shopify admin and add pages you wish to add as tabs.
In our case here, we will create two pages (Warranty and Shipping) and add content to them.
You can have images, videos, tables - Any type of content you can add to a page except forms.
Step 2: Adding Tabs to your Products
(i) Navigate to the Online Store >> Themes >> Palo Alto >> Customize >> Product pages (in the Shopify theme editor) and open the product page settings.
(ii) Within the product page settings tabs section, select pages for “Tab one”, “Tab Two” and “Tab Three”, depending on the number of tabs you would wish to have in place.
The theme only provides an option to have up to three tab sections by default.
In our case, here, we will add two tabs as we created two pages and save our changes.
You can have both unique product tabs and global tabs within your products by carrying out all the above steps mentioned. A sample output in our example would be: