Create product tabs for Broadcast

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

1

Local tabs - Unique tab content for individual products

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://shopify.com/admin/themes/current/editor

Navigate to the the Product page in the Shopify theme editor and open the 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

Open your product setup in the main Shopify Admin:

Choose the product you'd like to add your unique tabs to.

Next, add any information you'd like to appear before the tabs. This is important - Tabs must be the last thing you add.

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. 

If you want to have a Product Description tab to start then create a heading and call it something like Description, turn that into an H6 heading. Then simply add your information below that. You can create additional tabs, start each one with an H6 heading and the content following. 

For a detailed walkthrough of what can be done with local tabs you can refer to the detailed guide: Example: How to create product tabs with unique content on each product page

2

Global tabs - Shared content with all product pages

The second type of tabs you can add are Global tabs. These are actually the easiest to add and very customizable. Global tabs are share with all your product pages so keep that in mind. They are meant for displaying information that all products can display. An example would be 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:

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:

Quick link:
https://shopify.com/admin/pages

Once you have the content which can have images, videos, tables - Any type of content you can add to a page except forms. Then, add the Page tab type in the Theme Editor's Product page settings:

Page tab example:

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

Select page options:

(3) Allows you to search for a page.

(4) Allows you to create a new page if you don't have one created.

(5) Choose an already created page.

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

Example of a Page tab:

Example of HTML global tab:

The HTML and Text global tabs are fairly simple to use as well. Add the type you'd like and modify the content right within the settings. 

Add your HTML content directly in the tab content area (2):

Please note: Forms will not work in the HTML tab. Embedded videos, images, tables will work fine. 

Example of Text global tab

The text tab is similar and the easiest tab type to for your content. No HTML skills are required. 

Add your text content directly in the tab content area (2):

Use the toolbar to add links or format your text content. 

Notes

• Two steps are required 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:
In 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:

Sorting 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).