Shopify manuals

How to add tabs to the Shopify product page

Help Center / Shopify Manuals

  

If you have a lot of information on your Product page, you’ll may find it a find it a headache to maintain all the content and make it readable. If you have overloaded page, you can either create a structure to organize your data and prevent the page from becoming too “heavy”, or you can leave it as is and lose customers who might be bored by a ton of plain text.

If your customers can’t read through all the information about your product, its ingredients, and all necessary info about shipping and so on, most of them will probably close the page without the feeling that they need your product.

It’s vital for your store to have a tidy product page that will attract customers, so it’s smart to split up your product descriptions using tabs. You can create one tab for each part of the product description.

 

SOLUTION 1. Use a theme with built-in tabs functionality

Some Shopify themes have built-in tabs functionality which can help you create tabs.

Pros:

  1. Free of charge. You’ll only need to pay for the theme. 

Cons:

  1. The limited functionality of tabs creation in some themes means you’ll be able to create only a very small number of tabs
  2. Native theme tabs aren’t editable and you won’t be able to edit their layout. You may get something that doesn’t meet your expectations.

 

SOLUTION 2. Add tabs to your theme by yourself

You can also modify your theme and add the tabs code by yourself. This option will give you freedom to customize the tab views. To achieve your target, you may use following code, just add it to your product.liquid template:

<script type="text/javascript">
  $(document).ready(function(){
    $('ul.shopify-tabs > li').click(function(){
      var tab_id = $(this).attr('data-tab');

      $(this).parent().find('li').removeClass('current');
      $('.shopify-tab-content').removeClass('current');

      $(this).addClass('current');
      $("#"+tab_id).addClass('current');
    })
  })
</script>

To make your tabs look properly, you should also add some CSS styles to your theme's CSS file. Usually, it called like assets/styles.css or assets/style.scss.liquid but file name may vary depending on your theme. Add following code to the end of the file:

ul.shopify-tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.shopify-tabs > li{
    background: none;
    color: #333;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}
ul.shopify-tabs > li.current{
    background: #f0f0f0;
    color: #333;
}
.shopify-tab-content{
    display: none;
    background: #f0f0f0;
    padding: 15px;
}
.shopify-tab-content.current{
    display: block;
}

Actually that's it. Now you may add tabs to your Product Description using proper HTML formatting:

<ul class="shopify-tabs">
  <li class="current" data-tab="tab-description">Description</li>
  <li data-tab="tab-specs">Product Specs</li>
  <li data-tab="tab-delivery">Delivery</li>
  <li data-tab="tab-returns">Returns</li>
</ul>
<div id="tab-description" class="shopify-tab-content current">
  Description tab content
</div>
<div id="tab-specs" class="shopify-tab-content">
  Specs tab content
</div>
<div id="tab-delivery" class="shopify-tab-content">
  Delivery tab content
</div>
<div id="tab-returns" class="shopify-tab-content">
  Returns tab content
</div>

Pros:

  1. Free of charge
  2. Flexible tab creation

Cons:

  1. It is time-consuming to add code to your template
  2. You need some basic knowledge of CSS to modify your tabs’ appearance.

 

SOLUTION 3. Use 3rd party app to add tabs

There is also another option that allows you to have an unlimited number of easily created and editable tabs for a low monthly fee. Give the EasyTabs app a try if you don’t want to waste your time to create tabs on your product page.

EasyTabs can help you split product descriptions into tabs and add common tabs for a wide range of products in a few clicks.

This app has a number of layout settings that can help you achieve the layout you want:

Here you have a free space to experiment with different tabs styles – something you can never do with a native theme’s tabs.

And there are a lot of other options for the tabs’ appearance. But if you want to modify the appearance even more than is possible within the app’s settings, you can always contact us. We’ll do our best to make the app meet your wishes.

Pros:

  1. It’s easy to create tabs
  2. No limits on the number of tabs
  3. Fully editable layout
  4. Ability to create the unique set of tabs for different products
  5. Create common tabs for a wide range of products in a few clicks
  6. A lifetime support
  7. And much more!

Cons:

  1. A small monthly fee.

Need any help with our App? Our Customer Success team is always around to help!

Contact us!