Tabs: How to add and create content for Pipeline product tabs

In this article we will cover how to create tab content and how to add tabs to your product pages in Pipeline.

Note: Product tabs were introduced in Pipeline 3 and are only available if you're running Pipeline 3 or newer.

Examples: Below Product Image

Beside Product Image

There are two types of tabs you can use:

1

Local tabs - Unique content for only one product page

These are tabs that will only show on the current product. You can have multiple tabs for that one product but it won't be shared with other products like the global tabs.

  • Local tabs are activated by adding the Description H6 block in your Product page settings (required). 

Local tab content is then created within your Product setup page where you have the product description. It's best to start with your regular product description information which will be shown under the product title or product image. After you've added your product information, you can follow it with tab content. This may seem like a different concept but without using an app, this is how the theme can translate your information and put it into a tab. 

Step 1 - Activate Local tabs (Required)

This will only need to be done once. In the Theme Editor in your Product page settings, add the Description H6 tab type:

Open the Theme Editor (Customize Theme):

https://myshopify.com/admin/themes/current/editor

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:

Now that you've activated Local tabs, any product can now have local unique tabs created. The process is done within the product page in the product description area. 

Step 2 - Create your tab title and content

To make the title of your tab, write your text and make it a Heading 6 font type:

In this example, "My tab heading" will be converted to a tab title.

To create tab content:

All following content below the Heading 6 title will now become the content of your tab. You're not limited to just text, you can add photos and embed videos. 

Ending your tab content:

There isn't anything special you need to do for indicating the end of a tab (with the exception of starting another tab), all content after the Heading 6 title becomes the tab content.

Creating additional tabs:

After you've added all the content for your first tab, you can add addition tabs easily but creating a new tab title (write the title, highlight it and make the font a Heading 6). This indicates a new tab is starting and all the text/content following is for the that tab. 

There's no limit to how many tabs you can create except space. Once the tab titles get too long, the automatically get converted to  Accordions. Keep in mind that global tabs will still be displayed with local tabs so the number of total tabs on a page will be your global tabs + the tabs you created for that product. 

2

Global tabs - Shared content with all product pages

These tabs and content will be shown on all your product pages (handy for displaying common information like shipping info, warranty/returns, size charts, tips etc).

Global tabs are very simple to create, these are configured in the Theme Editor's Product page settings by adding any of these three tab types:

Open the Theme Editor (Customize Theme):

https://myshopify.com/admin/themes/current/editor

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 one of these three Global tab types:

Global Tab types:

  • Text
  • HTML
  • Page

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 great tool. Here you can drop a whole page into a tab. You can add an existing page you've made or make a new page just for the tab that doesn't show anywhere else on your site. 

Example of adding Page type Global tab

The Page type allows you to pull-in any Shopify page you've created as content for that tab. Build your pages here:

https://myshopify.com/admin/pages


Page tab example:
(1) Tab title, (2) browse to an already created Shopify Page. 

Browse and select a page:

 You can search for a page (the listing options are short so searching for a page can help make it easier if you don't see your page listed here) or just select the page for your content.

Save your settings and you can now view the tabs on your product pages. 


Notes

  • Two steps are require for Local tabs. First activate in the Theme Editor -> Product page settings -> Add Description H6 tab type. All the tab content is created within your Product page settings of that product. Multiple local tabs can be created for an individual product. Begin each tab with a Heading 6 font style title followed by the content. Repeat for each local tab. 
  • Global tabs (Text, HTML, Page) are all added in the Theme Editor -> Product page settings -> Add Text/HTML/Page tab types. Global tabs will be displayed on all your product pages. Use a Local tab if you need any unique content on a product page. 
  • Multiple Global tab types can be added and sorted all in the Theme Editor -> Product page settings. Description H6 only needs to be added once in the Theme Editor -> Product page settings, that will activate for all products if <h6> tags are used in the product description. 

Example of multiple Global tabs with activated Local tabs:
548940860ab5ac41de088360a2814c2c.pngIn that example, the Local tabs will be shown first in order, then followed by the other Global tabs.   

To sort your tabs, drag-and-drop the order by using handle icon (six-dots) on the right of the section:

Aug-25-2017-11-11-27.gifSorting the actual Local tabs is done manually in the product description of the product page. 

Once you've added your tabs, remember to  Save your changes in the Theme Editor (top-right). 

Still need help? Contact Us Contact Us