Product pages - Add tabs to product descriptions

Highlighted
Community Manager
Community Manager
449 23 511

Because all themes are different, no single method will serve all themes perfectly. Please use this as an overview and not as an exact method.

 

For this demo, you will adding three tabs to all product pages. In the first tab, you will load up the product description. In a second tab, you will load up a snippet. In the third tab, you will load a static page. When you are done, your product page will display 3 tabs:

 

tab-01.jpg

 

Check for jQuery


Most themes use jQuery, but, just to be sure, check your theme.liquid file for the presence of jQuery.

If your theme does not already use jQuery, you will need to include jQuery in the head of your document. To check if you're already using jQuery, open the theme.liquid file in the online code editor. Use the shortcut command+f (mac) or ctrl+f (pc) and find the term "jQuery". If you can locate it, you're already using it, and if not, then it's time to include it in your header.

 


Edit sections/product-template.liquid

In the product-template.liquid template, locate your product description.

 

{{ product.description }}

 

Replace it with the following code:

 

<div>
  <ul class="tabs">
    <li><a href="#tab-1">Info</a></li>
    <li><a href="#tab-2">Shipping</a></li>
    <li><a href="#tab-3">Returns</a></li>
  </ul>
  <div id="tab-1">
  {{ product.description }}
  </div>
  <div id="tab-2">
  {% render 'shipping' %}
  </div>
  <div id="tab-3">
  {{ pages.returns.content }}
  </div>
</div>

 

In the first tab, you will load your product description. So, you will change the link to "Info" and add the liquid tag for the product description into the div holding the tab's content.

 

In the second tab, render a snippet (make sure to create a new snippet and call it "shipping"), mainly because this will contain content that you do not want indexed by search engines, or to come up in a site search.

 

In the third and last tab, place the content of the Returns page. It doesn't matter if that comes up in a search or is indexed by Google.

 

 

Add some jQuery

Once you have your markup in place, add the following JavaScript code at the bottom of your assets/theme.js file:

 

  $(document).ready(function() {
    $('ul.tabs').each(function(){
      var active, content, links = $(this).find('a');
      active = links.first().addClass('active');
      content = $(active.attr('href'));
      links.not(':first').each(function () {
        $($(this).attr('href')).hide();
      });
      $(this).find('a').click(function(e){
        active.removeClass('active');
        content.hide();
        active = $(this);
        content = $($(this).attr('href'));
        active.addClass('active');
        content.show();
        return false;
      });
    });
  });

 

You should end up with something like this:

 

tab-02.jpg

 

 

Use CSS to make it beautiful

With CSS, you will end up with something like this:

 

tab-03.jpg


Here is some sample CSS to add at the bottom of your sections/product-template.liquid template (if you are using a sectioned theme), or your templates/product.liquid file (if you are using a non-sectioned theme):

 

<style>
ul.tabs {
  border-bottom: 1px solid #DDDDDD;
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
ul.tabs li {
  display: block;
  float: left;
  height: 30px;
  margin-bottom: 0;
  padding: 0;
  width: auto;
}
ul.tabs li a {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 #F5F5F5;
  border-color: #DDDDDD !important;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  display: block;
  font-size: 13px;
  height: 29px;
  line-height: 30px;
  margin: 0;
  padding: 0 20px;
  text-decoration: none;
  width: auto;
  color: #303030;
  border-bottom:none !important;
}
ul.tabs li a.active {
  background: none repeat scroll 0 0 #FFFFFF;
  border-left-width: 1px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #111111;
  height: 30px;
  margin: 0 0 0 -1px;
  padding-top: 4px;
  position: relative;
  top: -4px;
}
ul.tabs li:first-child a.active {
  margin-left: 0;
}
ul.tabs li:first-child a {
  border-top-left-radius: 2px;
  border-width: 1px 1px 0;
}
ul.tabs li:last-child a {
  border-top-right-radius: 2px;
}
ul.tabs:before, ul.tabs:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
ul.tabs:after {
  clear: both;
}
</style>

 

View the example site here: http://jewess-blick9504.myshopify.com/products/acadia-surf

 

 

TyW | Community Manager @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

6 Likes
Highlighted
New Member
1 0 0

Hi! I followed the steps you outlined and it worked for me so far. However, my Returns tab is empty, and I'm not quite sure on how to put the contents of my refund policy page in there. I'm not good with technical stuff so can you please help me with this?

0 Likes
Highlighted
Shopify Partner
3 0 1

Does this work in Debut theme? Is it possible to adjust the background color of the tabs? I am using an app right now--what will happen when I add this with existing product descriptions using the app?

1 Like
Highlighted
Shopify Partner
79 2 7

In the steps, the returns tab has {{ pages.returns.content }}, which basically gets the contents of the page with the handle  'returns'

 

If you go to your returns policy page in your Shopify admin, you can view or edit its handler by clicking on 'Edit website SEO' near the bottom, under 'URL and handle', and you can change the handle name at the end of the textfield to 'returns'.

 

Alternatively you can also change the code itself e.g. to {{ pages.returns-policy.content }} instead of changing the handle. 

 

For more options and without needing to go into code, you can try out our app to add tabs / accordion to your product page - https://apps.shopify.com/custom-product-accordion-tabs =)

1 Like
Highlighted

Did you change this line to reflect the name/url of your refunds page? 

pages.returns.content

That should be pages.refunds.content if "refunds" is the name of the page you want in the 3rd tab.

1 Like
Highlighted
New Member
1 0 2

This was very helpful. Thank you!

I want to add more tabs, but don't know how. Also, How can I add the information I need in each tab, like the ingredients etc... ? do I need to create an ingredient page for each product? If so, how to I link it?

 

checkout my results: www.marthalorine.com

2 Likes
Highlighted
New Member
2 0 0

Hi

Saw your website which looks really good with the tabs.  Would be grateful if you could tell me how you changed the description information on the pages as I can't work this out

Thanks in advance

Reena

 

0 Likes
Highlighted
Shopify Partner
3 0 1

I did not use the custom coding. I used a free app from Shopify Apps called Tabs By Station. Using presets you can create tabs that look almost identical to the example above.

0 Likes
Highlighted
New Member
2 0 0

Brilliant thank you will check it out :)

Many thanks

 

0 Likes
Highlighted
New Member
1 0 0
Hi,
Thanks for helping us all, i successfully add the tabs and everything working i just create shipping pages and used pages.shipping.content instead snipet and everything working properly.

But have 1 error i got 3 dots next to each social media share button below discretion.

And i got html error on page product customization page.

So how can can i get it all done.
0 Likes