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 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:
When you click that, scroll towards the bottom for the tab options:
Choose "Add content" and your tab type options will appear:
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.
- 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.
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:
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.
- Text tab - No coding required, the easiest type way to add tab information for simple tabs.
- 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:
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):
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.