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 framework
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.
Earn extra revenue by referring Turbo, Flex, and Superstore!
You can earn commissions on referred sales of Turbo, Flex, and Superstore when you join our affiliate program in PartnerStack!
Affiliate Program Benefits:
- Earn 15% commissions - Receive up to 15% commission for each sale made through your referral link. This is a fantastic opportunity to generate additional revenue while helping your clients elevate their online presence.
- Exclusive access to our themes -As an affiliate, you'll gain insider access to our top-selling themes, including Turbo, Flex, and Superstore, which are known for their adaptability, robust features, and exceptional design.
- Dedicated support and resources - We provide our affiliates with dedicated support, marketing materials, and all the resources needed to successfully promote our themes.