Example: How to create Local tabs with unique content a specific product page

For content that's unique to individual products, we manage the content right in the product setup. There is one required step in the Theme Editor to activate unique or local tabs. You'll need to add the content type "Description H6":

This tells the theme to look for H6 tags in your product setup which will then create unique tabs.

Add Description H6 in the content section to activate unique or local tabs. 

After adding the content block, the next step is done in your product setup. 

Now that we have activated Description H6 tabs, in our product setup we can use H6 tags to create a tab title and all content below will appear in the tab. If we're creating multiple tabs, we begin the next tab with another H6 tag. 

Basic example - Move entire description into a tab

To move the entire description of this product into a tab, we can easily add a tab title to the start of the content. Tab titles need to have the <h6></h6> tags or use the Heading 6 font style. 

Step 1 - Add a tab title:

Step 2: Select the title and change to Heading 6 font style:

While selected, choose the font style drop-down in the toolbar:

Choose Heading 6:

Notice that the font style has changed:

Save your changes. 

When you view the product in the theme editor or website, you'll now see the new Description tab created along side with the shared tabs:

To sort tabs, in the Theme Editor use the handle icon which is on the right of each content block to drag and drop into position. 

Let's move the Description tab to the front. Drag from the handle icon on the right and drop at the top:

After:

Now our Description tab will appear first:

Troubleshooting

Let's have a peek at the code to what happens when you apply the Heading 6 font style:

Notice the tab title is in clean <h6></h6> tags - This is important. If you use copy/paste from another website, you may pick-up some style code. If you are having any trouble with your tabs, this is likely the case. Check the code and only use clean titles inside the h6 tags:

<h6>Tab Title</h6>

Always use clean tab title tags without any class or styles. 

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

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

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

Intermediate Example - Mix product description with tabs

In the above example we moved the entire description into a tab. For the next example, we will keep the original product description outside of the tabs and create a new tab called Vintage Notes:

In the product setup, we can begin adding our Design tab title and content after the regular (original) product description. For this example, I've removed the description tab from the first example. 

Tabs should always begin after any content you want displayed outside of the tabs. 

To add a new tab, insert the tab details  after your product description:

Start with the tab title (Design) followed by the tab contents. 

Next, select the tab title to change the font style:

Use the font style drop-down from the icon bar:

Choose Heading 6:

Notice the tab title format has changed:

Save your changes. 

The new tab Design has been added while the standard product description is shown outside of the tabs:

Since this has been added only to this product, the rest of your products won't display the Design tab, only the shared tabs. Each product can have their own tabs by using the Heading 6 format. 

Adding multiple tabs is simple once you understand how Heading 6 tabs are created. To add additional unique tabs, stack their content below each other in the product description.

To start a new tab, create a title and content below. Tabs are always at the end of your product description. Here's an example of a new tab created called Cleaning:

Resulting in:

You can stack as many tabs as needed:

Be sure there is no content after your tabs. Regular product description content should reside above the tabs.

Accordions

In the previous example, I removed Taxes to allow the tabs to fit in the right column. Once I added the tabs back, accordions were automatically created as there wasn't enough space to display the tab titles. 

As you can see, there isn't enough room for additional tabs here:

When you run out of space in the columns to fit your tab titles, Story theme will automatically convert the tabs into accordions:

Accordions open and close using the controls on the right:

Multiple accordions can be open at the same time:

Sometimes, moving your tabs below the featured image into a full-width column will allow you to display more tabs and prevent switching to accordions:

(from Product page settings in the Theme Editor)

Tabs below has more space to fit your tabs:

Keep in mind mobile users have less space, accordions are usually displayed for mobile devices.