Example: How to create product tabs with unique content on each product page

When creating tabs in Broadcast, there are two types of tabs you can use - Local tabs which have unique content for only one product page or Global tabs which share the same content on all product pages.

For this article, we will learn how to add a Local tab which is unique content just for one product page. 

1

Add Description H6 tab block to activate local tabs

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:

2

Create tab content in Product page setup

Edit content in your Shopify Product setup:

https://shopify.com/admin/products

Find the product you'd like to add a Local tab to. Use the Rich Text Editor to create a tab title and tab content. 

Let's start with a very simple example

Result - Move entire product description into a tab:

How to:

Here is my current sample product description:

Sample version in code:

<p>Easy to paddle, easy to catch waves with, easy to ride, easy to rip. The Extension Ramp surfboard takes an average day and makes it epic for surfers of all abilities.</p>

If I want to move the entire description in to a tab, I can use this trick:

Click on the code view icon to see your description in code view:

Add the following to the very top of your product description:

<h6>Product Description</h6>

Example:

Sample code:

<h6>Product Description</h6>
<p>Easy to paddle, easy to catch waves with, easy to ride, easy to rip. The Extension Ramp surfboard takes an average day and makes it epic for surfers of all abilities.</p>

Save the changes and now your description will be moved into a tab.

Result:

After you've saved, you'll notice that the H6 title is smaller in the regular editor mode:

That's your tab title, we'll use that in more examples. 

If you don't want your product description in a tab, simply start creating your tabs (next example) after the regular product description.

Let's add another tab

This time, I'll demonstrate how to add a tab without using the code method.

Result:

Start by entering a title for the tab. Add that after the product description:

Let's call this tab - Features:

Now, select that title text and change it to a Heading H6 style from the font menu:

Choose Heading 6 from the font drop-down:

You'll see the title change to that smaller title font:

That's the tab title. Next, let's add some content below which becomes our tab content. 

Press enter to start a new line. Let's add an image:

(5) Choose your image

(6) Verify the size you want

(7) Insert the image

You can add some text below the image if you like (8):

Save and preview your page.

Example result:

Sample code:

<h6>Product Description</h6>
<p>Easy to paddle, easy to catch waves with, easy to ride, easy to rip. The Extension Ramp surfboard takes an average day and makes it epic for surfers of all abilities.</p>

<h6>Features</h6>
<p><img src="//cdn.shopify.com/s/files/1/2018/8867/files/surf-tech-magnesium-basalt-carbon-logo_grande.png" alt="sample" /></p>
<p>The new Lib Tech MBC construction perfectly blends the best characteristics of epoxy: durability and liveliness with the best performance characteristics of polyester: flex and dampness. The addition of magnesium fiber improves our overall impact resistance, and the carbon composite stringer exactly matches the flex of a new high performance polyester and holds it for the life of the board. The world’s best surfboard construction just got even better</p>

Add a third local tab with video as content 

Grab your video embed code from YouTube or Vimeo and have it ready to add. 

Create the third tab title (1): Video

Highlight the title (2) and convert to a Heading H6 font type (3):

Choose Heading 6:

Press enter after the title (4):

Click on the video icon in the toolbar (5).

Paste your video embed code:

Use the Insert video to complete. 

Save your changes and preview your page. 

Result:

Sample description code:

<h6>Product Description</h6>
<p>Easy to paddle, easy to catch waves with, easy to ride, easy to rip. The Extension Ramp surfboard takes an average day and makes it epic for surfers of all abilities.</p>
<h6>Features</h6>
<p><img src="//cdn.shopify.com/s/files/1/2018/8867/files/surf-tech-magnesium-basalt-carbon-logo_grande.png" alt="sample" /></p>
<p>The new Lib Tech MBC construction perfectly blends the best characteristics of epoxy: durability and liveliness with the best performance characteristics of polyester: flex and dampness. The addition of magnesium fiber improves our overall impact resistance, and the carbon composite stringer exactly matches the flex of a new high performance polyester and holds it for the life of the board. The world’s best surfboard construction just got even better</p>
<h6>Video</h6>
<p><iframe src="https://player.vimeo.com/video/222725770?autoplay=0&loop=1&autopause=0" width="500" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></p>

You can add as many Local tabs as needed. Each new tab begins with a Heading 6 title. 

Troubleshooting - Formatting issues

When you copy/paste titles or content from other sites or pages, some of the HTML formatting code that comes with it can cause issues with your tabs/accordions. Try to keep the code in your product description very clean. Use the code view to inspect your content and clear out unnecessary HTML that can come from copy/paste. 

Try to keep your <h6>Tab title</h6> titles clean:

Example of good formatting:

<h6>INGREDIENTS</h6>

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

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

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

Global tabs with local tabs

You can combine Local tabs with Global tabs. The Global tabs will appear on all product pages and the Local tabs will only appear on the product page where you've added the Heading 6 title and content below.