Tabs: Using product tabs in Pipeline

Story theme link - Click here for how to use tabs with Story

Here's an overview of product tabs and how to use them in Pipeline. Tabs can be positioned on the right column with the product description or below the featured product image.

Example of tabs placed in the product details column:

Example of tabs placed below:

There are two primary types of tabs - Shared tabs, also known as global tabs and unique tabs, also known as local tabs. Global tabs are shared with all products and local tabs are unique to each product. 

These tab features require that your theme version to be 3.0 or higher. Earlier versions before Pipeline 3 will need to update to have the same functionality. 

Shared Tabs

Shared tabs are ideal for content that all your products will display. For example, shipping, taxes, returns and more. This allows you to add the information once and it's instantly displayed on all products. 

Shared or global tabs are added in the Theme Editor using the Product pages settings: 

In the Content section, use the Add content block to begin adding tabs. 

These three are all shared content:

Text tab is for simple content. It uses the standard Shopify rich-text editor which allows you to bold, italicize without using any code. 

HTML tab is for richer content. You can embed videos, add any standard html tags to style your content. 

Page tab is a unique and helpful tool. With a page tab, you can include an entire page that you've created into the tab. Add an existing page or make a new page with content just for the tab. The page doesn't need to be shown elsewhere on your site. 

Description H6 is for adding unique content to product pages, that will be covered below. 

Once you begin adding any of these three content types, tabs will be automatically generated for all pages:

Example of Shipping tab using Text content type:

Tip: If you have a Shopify Page created for product sizes, you can use the Page tab type to display the entire page in a tab. Since this will be shared with all product pages, be sure it includes sizing for all product types. 

Unique Tabs

For content that's unique to individual products, we manage the content right in the product setup. There is one required step in the Theme Editor to activate unique or local tabs. You'll need to add the content type "Description H6":

This tells the theme to look for H6 tags in your product setup which will then create unique tabs.

Add Description H6 in the content section to activate unique or local tabs. 

After adding the content block, the next step is done in your product setup. 

Now that we have activated Description H6 tabs, in our product setup we can use H6 tags to create a tab title and all content below will appear in the tab. If we're creating multiple tabs, we begin the next tab with another H6 tag. 

Basic example - Move entire description into a tab

To move the entire description of this product into a tab, we can easily add a tab title to the start of the content. Tab titles need to have the <h6></h6> tags or use the Heading 6 font style. 

Step 1 - Add a tab title:

Step 2: Select the title and change to Heading 6 font style:

While selected, choose the font style drop-down in the toolbar:

Choose Heading 6:

Notice that the font style has changed:

Save your changes. 

When you view the product in the theme editor or website, you'll now see the new Description tab created along side with the shared tabs:

To sort tabs, in the Theme Editor use the handle icon which is on the right of each content block to drag and drop into position. 

Let's move the Description tab to the front. Drag from the handle icon on the right and drop at the top:

After:

Now our Description tab will appear first:

Troubleshooting

Let's have a peek at the code to what happens when you apply the Heading 6 font style:

Notice the tab title is in clean <h6></h6> tags - This is important. If you use copy/paste from another website, you may pick-up some style code. If you are having any trouble with your tabs, this is likely the case. Check the code and only use clean titles inside the h6 tags:

<h6>Tab Title</h6>

Always use clean tab title tags without any class or styles. 

Example of extra style code which will break the tab and accordion formatting:

<h6 style="text-align: left;"><span>Tab Title</span></h6>

The added style in the in the <h6></h6> tags will cause formatting issues. Clean out any extra styles you have in your markup to help fix tab and accordion issues.

Intermediate Example - Mix product description with tabs

In the above example we moved the entire description into a tab. For the next example, we will keep the original product description outside of the tabs and create a new tab called Vintage Notes:

In the product setup, we can begin adding our Design tab title and content after the regular (original) product description. For this example, I've removed the description tab from the first example. 

Tabs should always begin after any content you want displayed outside of the tabs. 

To add a new tab, insert the tab details  after your product description:

Start with the tab title (Design) followed by the tab contents. 

Next, select the tab title to change the font style:

Use the font style drop-down from the icon bar:

Choose Heading 6:

Notice the tab title format has changed:

Save your changes. 

The new tab Design has been added while the standard product description is shown outside of the tabs:

Since this has been added only to this product, the rest of your products won't display the Design tab, only the shared tabs. Each product can have their own tabs by using the Heading 6 format. 

Adding multiple tabs is simple once you understand how Heading 6 tabs are created. To add additional unique tabs, stack their content below each other in the product description.

To start a new tab, create a title and content below. Tabs are always at the end of your product description. Here's an example of a new tab created called Cleaning:

Resulting in:

You can stack as many tabs as needed:

Be sure there is no content after your tabs. Regular product description content should reside above the tabs.

Accordions

In the previous example, I removed Taxes to allow the tabs to fit in the right column. Once I added the tabs back, accordions were automatically created as there wasn't enough space to display the tab titles. 

As you can see, there isn't enough room for additional tabs here:

When you run out of space in the columns to fit your tab titles, Story theme will automatically convert the tabs into accordions:

Accordions open and close using the controls on the right:

Multiple accordions can be open at the same time:

Sometimes, moving your tabs below the featured image into a full-width column will allow you to display more tabs and prevent switching to accordions:

(from Product page settings in the Theme Editor)

Tabs below has more space to fit your tabs:

Keep in mind mobile users have less space, accordions are usually displayed for mobile devices.