Add Tabs to Product and Collection Descriptions

Adding tabs to product descriptions is a good way to add more details about products in a small amount of space. Tabs are often used to break up different information/topics that you want your customers to be aware of when reading about the product or service.

They can be a great way to reduce visual clutter while also showing much more detail without having to send a customer to a different page. Tabs also help your customers easily find specific information quickly by clicking on the related tab.  

Common topics for tabs include product description, ingredients, nutritional information, instructions or how to use, information about the brand, reviews, feature or product specifications, shipping, and returns. 

Tabs Code

You can create tabs by following this HTML example. In the example code, the bold text should be customized to your specific content:

<!--Start tab labels-->
<ul class="tabs">
  <li><a class="active" href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>
<!--Start tab content-->
<ul class="tabs-content">
  <li class="active" id="tab1">Tab 1 content</li>
  <li id="tab2">Tab 2 content</li>
  <li id="tab3">Tab 3 content</li>
</ul>

Note that there are two distinct sections of the code above. The first part, which is the first six lines, is used to create the labels that users see on the tabs. Then, the last six lines control the actual content that users see when clicking a specific tab.

More than three tabs

You can add additional tabs as needed by mimicking the code above and increasing the numbers in the code.

For example, to add a fourth tab, add this line below the code for Tab 3 in the first block of code:

<li><a href="#tab4">Tab 4</a></li>

Then, add this code below the code for Tab 3 content in the second part of the code:

<li id="tab4">Tab 4 content</li>

You can repeat this, increasing the number in the "id" tag (shown in bold above) each time. However, keep in mind that your tabs will eventually jump to a second line which can have undesirable results. 

Bullet lists within tabs

To create bullet lists within the tabs of a product description, you can use ordered list elements with bullet list item elements (<ol> and <li type="disc">) in the HTML section of each product [< >] (top right corner of the product description).

In the following code example, each tab contains a three-item bulleted list:

<!--Start tab labels-->
<ul class="tabs">
<li><a class="active" href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>

<!--Start tab content-->

<ul class="tabs-content">
<li class="active" id="tab1">
<ol>
<li type="disc">Tab 1 content</li>
<li type="disc">More Tab 1 content</li>
<li type="disc">Even more Tab 1 content</li>
</ol>
</li>
<li id="tab2">
<ol>
<li type="disc">Tab 2 content</li>
<li type="disc">More Tab 2 content</li>
<li type="disc">Even more Tab 2 content</li>
</ol>
</li>
<li id="tab3">
<ol>
<li type="disc">Tab 3 content</li>
<li type="disc">More Tab 3 content</li>
<li type="disc">Even more Tab 3 content</li>
</ol>
</li>
</ul>

This will achieve a look similar to this image:

Tabs on mobile

On mobile devices, the theme will attempt to keep all of the tabs on the same line, but, depending on the exact amount of space needed, it may go to another line.

Automatically selecting a tab

At this time, it is not possible to automatically make a different tab's content be visible when the page loads based on the link the user clicks.

Example

Here are some examples of how tabs are displayed in each of our themes.

* NOTE: May not be available on all sections, blocks or templates