Tabs are an HTML framework used to include more content within a limited space. Just like a file folder, product descriptions can be organized into tabs to save space and include more information.
This tab structure is not compatible with Tailor. Use the Collapsible tabs block to enhance your product pages instead. Try collapsible tabs.
Check out an example product description using tabs by visiting the Startup Home demo's product page.
Add the tab layout through the product editor
In the Products admin, locate the product to edit.
Open the product editor, then scroll down to the Description rich text editor.
If you already have some description text in place, it would be worth backing it up in case the content is replaced by this modification.
In the top-right corner, select Show HTML
In this HTML view, paste this code snippet to the description:
<ul class="tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<ul class="tabs-content">
<li class="active">
<p>Tab 1 content goes here.</p>
</li>
<li> <p>Tab 2 content goes here.</p> </li>
<li> <p>Tab 3 content goes here.</p> </li>
</ul>
Once this has been copied to the HTML view, click the same button to return to the RTE view (Show editor). The tabbed content will look like basic bullet points at first.
Begin replacing the Tabs and Tabs content portions with your product description content.
Tab 1, Tab 2, and Tab 3 serve as the labels for the tabs. Replace these with short titles for the tabbed categories.
In place of the Tab 1, 2, and 3 content goes here placeholders, add the copy.
Once the three tabs and their respective content have been filled, Save and preview the product page to see the tabs in action.
-
Tab 1 content goes here.
-
Tab 2 content goes here.
-
Tab 3 content goes here.
Recipes
Two tabs
<ul class="tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
</ul>
<ul class="tabs-content">
<li class="active">
<p>Tab 1 content goes here.</p>
</li>
<li> <p>Tab 2 content goes here.</p> </li>
</ul>
Three tabs
<ul class="tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<ul class="tabs-content">
<li class="active">
<p>Tab 1 content goes here.</p>
</li>
<li> <p>Tab 2 content goes here.</p> </li>
<li> <p>Tab 3 content goes here.</p> </li>
</ul>
Four tabs
<ul class="tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<ul class="tabs-content">
<li class="active">
<p>Tab 1 content goes here.</p>
</li>
<li> <p>Tab 2 content goes here.</p> </li>
<li> <p>Tab 3 content goes here.</p> </li>
<li> <p>Tab 4 content goes here.</p> </li>
</ul>
Five tabs
<ul class="tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
</ul>
<ul class="tabs-content">
<li class="active">
<p>Tab 1 content goes here.</p>
</li>
<li> <p>Tab 2 content goes here.</p> </li>
<li> <p>Tab 3 content goes here.</p> </li>
<li> <p>Tab 4 content goes here.</p> </li>
<li> <p>Tab 5 content goes here.</p> </li>
</ul>
Six tabs
<ul class="tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
</ul>
<ul class="tabs-content">
<li class="active">
<p>Tab 1 content goes here.</p>
</li>
<li> <p>Tab 2 content goes here.</p> </li>
<li> <p>Tab 3 content goes here.</p> </li>
<li> <p>Tab 4 content goes here.</p> </li>
<li> <p>Tab 5 content goes here.</p> </li>
<li> <p>Tab 6 content goes here.</p> </li>
</ul>
Seven tabs
<ul class="tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
<li>Tab 7</li>
</ul>
<ul class="tabs-content">
<li class="active">
<p>Tab 1 content goes here.</p>
</li>
<li> <p>Tab 2 content goes here.</p> </li>
<li> <p>Tab 3 content goes here.</p> </li>
<li> <p>Tab 4 content goes here.</p> </li>
<li> <p>Tab 5 content goes here.</p> </li>
<li> <p>Tab 6 content goes here.</p> </li>
<li> <p>Tab 7 content goes here.</p> </li>
</ul>
Remove default description label in Launch
If you're using Launch, there may be a doubled instance of the Description tab.
To resolve this, go to Actions > Edit code > Assets > theme.css.liquid
Scroll to the very bottom of this file and paste this code:
/* default description label conceal */
.product-tabs-header {display: none;}
/* end */
Save and preview to confirm its effect.