The Best Way to Add Tabs to Shopify Product Page

Product pages are the most important part of your online store, and vital for web designers when designing the product page. They’re where customers decide what to buy, and when to buy it. Product pages have 3 jobs, in this order:

▪ Convey the value of what you’re selling.
▪ Address objections from customers.
▪ Close the sale.

If you have an information dense product page, merchants often struggle to organize all the description content and make it readable. That's where product tabs come in. If you have overloaded page, you can either create a structure with tabs to organize your data and prevent the page from becoming too “heavy”, or you can leave it as is and frustrate customers who might be overwhelmed by a ton of plain text.


Your product pages are the most load-bearing component of your store. If your store were a team within your company, the product page would be the front-line sales clerk. Make sure it’s knowledgeable, friendly, talks to the customer well, and closes the sale. Here is a step-by-step breakdown how you can add tabs to your product descriptions. Some minimal comfort with coding is required: 

1. Add the following code to the bottom of your product.liquid template, or the bottom of the theme.js file.

<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>

2. Add some styling (via CSS)

To organize your tabs, add color, boldness and format it correctly, let's add some CSS styling o your theme's CSS file. Usually, for the impulse theme it's called theme.css.liquid but file name may vary depending on your theme. Add following code to the end of the file:

3. Let's properly format your product description so that the tabs show up on the product page. 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>

Note: Feel free to change the copy to suit your description needs.

Looking to build or redesign your Shopify website? Check out the Exhibea Website. We also recommend reading our guide on how to make your e-commerce store more profitable.