Example: How to create Local tabs with unique content a specific product page
When creating tabs in Pipeline 3.x and above, there are two types of tabs you can use - Local tabs which have unique content for only one product page or Global tabs which share the same content on all product pages.
For this article, we will learn how to add a Local tab which is unique content just for one product page.
Add Description H6 tab block to activate local tabs
Open the Theme Editor (Customize Theme):
Navigate to the the Product page settings using the top-left drop-down menu:
After choosing Product pages, you'll see the left sections area change to:
Click on Product page (3) to view Product page settings. Scroll down to the Optional Product Tabs section and choose Add content:
Choose Description H6 (all other options are Global tabs which are common to all product pages) for Local tabs:
Verify that Description H6 tabs have been added then save your changes:
Save button is located at the top-right:
Create tab content in Product page setup
Edit content in your Shopify Product setup:
Find the product you'd like to add a Local tab to. Use the Rich Text Editor to create a tab title and tab content.
Start by entering a title - In this example we will call our tab Video:
To tell the theme this will be a Local tab, we now convert the title (Video) to a Heading 6 font style.
Highlight the title text (1), choose the font style icon in the toolbar drop-down (2) and select Heading 6 (3):
The title will look smaller:
That will be your tab title. All content below that will be in your tab.
Lets add a video now to the tab content area:
Below the title, add text, images, video etc. I'll start with some text to introduce the video:
Be sure it's not in the same style as the Heading 6 (title). If you find it's using the same style, use the font style drop-down and change to a paragraph style.
Next, I'll use the video embed icon in the toolbar to add a Vimeo video:
Save your changes and now you can preview the tab:
When I preview this product page, I'll see the first Local tab created:
Let's add a second tab called Surfboard Style and then add an image below the title:
I've converted the title to a Heading 6 (1) and added my image below the the title (2):
When I preview this page after saving, I'll have two tabs:
You can add as many Local tabs as needed. Each new tab begins with a Heading 6 title.
You can even add all the product description into a tab by starting with Heading 6 title:
Try to keep your <h6>Tab tittle</h6> titles clean:
Example of good formatting:
Example of extra style code which will break the tab/accordion formatting:
<h6 style="text-align: left;"><span>INGREDIENTS</span></h6>
The added style in the in the
<h6> tag will cause formatting issues. Clean out any extra styles you have in your HTML markup to help fix tab and accordion issues.
Global tabs with local tabs
You can combine Local tabs with Global tabs. The Global tabs will appear on all product pages and the Local tabs will only appear on the product page where you've added the Heading 6 title and content below.