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

Examples: Below Product Image

Beside Product Image

2 main types of tabs

Global - These tabs will show on all your product pages (handy for displaying common information like shipping info, warranty/returns, size charts, tips etc).
Local - 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. 

The global tabs are very easy to add and come in 3 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. 

There is only one type of local tab:

  • Description H6

Description H6 works 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. 

The format for creating a local tab has 2 parts:

Tab Title and Tab Content

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

"My tab heading" will be converted to a tab title.  

To create your  tab content:
All following content below the title/heading6 now becomes the content of your tab. You're not limited to just text, you can add photos and embed videos. 

To end 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 title/heading6 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. 

Adding Tabs (Required)

Step 1 We've covered the types of tabs and how to create content. To actually add them into Pipeline, you'll need to add a section in your Product Page settings:

In the Theme Editor, navigate to any Product - You'll notice the left section options will change and now include "Product page". Click on that for additional settings:

9999767a2751e351d37349eaa41fac70.png

When you click that, scroll towards the bottom for the tab options:

734f33681e159b42f7d1ab5f420ba382.png
Choose "Add content" and your tab type options will appear:

ac316d717d0f125bd3748a625f1afde0.png

How this works:

  • For adding local tabs (Description H6), select that type to add. You only need to add it once regardless of how many tabs you created in your Product Description area.
  • Text, HTML, Page can be added multiple times individually. Each one you add will be a separate global tab.

Notes:

  • The number of local tabs (Description H6) you create is all done in your Product Description area as discussed above.
  • The number of global tabs (Text, HTML, Page) is handled here by the number modules you add here.
  • If you don't plan to have any local (Description H6) tabs, you don't need to add this section, it's optional. However, if even just one Product you sell needs a local tab, then this is a required step. The other products won't show any tabs unless you use the Heading 6 font style which triggers a tab tile.


Example:
548940860ab5ac41de088360a2814c2c.png
In this example, any of my products that have local tabs created (in their product description), those tabs will be displayed. Also, 3 global tabs will be shown on all my product pages (the two HTML tabs and the Page tab). 

If I want to sort my global tabs, I can drag-and-drop the order using the 6-dot icon on the right of the section:

Aug-25-2017-11-11-27.gif

Once you've added your tabs here. Save the changes. 

Step 2 - Global Tab Content:
Adding content for these tabs is all done here in the section settings. Local (Description H6) content is done in the Product description area of the product setup page. Global tab content is managed here within the section blocks.

Key points:

  • Text tab - No coding required, the easiest type way to add tab information for simple tabs.
  • HTML tab - You can add any html tags here except for scripts like Javascript. You can embed videos or forms here. Pictures can be added using the <img> tags.
  • Page tab - This one is very handy. You can use an existing page that you've created and choose it here. That allows you to manage the content of the tab very easily with the regular Page Editor.


Page tab example:
78b60802acedc2a1f6f01acd695b7eb2.png
The title of your tab is the "Label" setting.
Click on the "Tab content" drop-down to browse for a page (page must already be created to see it here or use the Add page link to create one then return here to browse):

2931aeb078f87c8a2501fecf20e7d33b.png

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. 

Still need help? Contact Us Contact Us