Add Tabs to Product and Collection Descriptions – Out of the Sandbox

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.

Live Tabs Editor

Use the live Tabs Editor to easily generate your tabs.

Try it out

Step 1

Navigate to the tabs editor.

Step 2

Enter the tab titles and insert the text you'd like to appear in each tab.

Step 3

Click the Get Code button at the top of the editor

Step 4

Click the Copy to Clipboard button to copy all of the tabs code.

Step 5

Navigate to your Product in the Shopify Admin.

Step 6

In the Product admin page, click the Show HTML [<>] button in the rich text editor to enter HTML mode.

You can also add tabs to sections such as Custom Liquid and Custom HTML to enhance templates

Step 7

Paste in the tab code. Please note: you must paste the code in the HTML mode for this to work.

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.