FROM CACHE - en_header

Product pages - Add tabs to product descriptions

TyW
Community Manager
Community Manager
417 40 1135

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 | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 46 (46)
RhysAsmara
Excursionist
40 0 3

@AttaRehman  the one that @elydenise shared the link too is the one I used.

JPV
New Member
2 0 0

How to do this in Canopy theme?

RhysAsmara
Excursionist
40 0 3

@JPV  If you follow these instruction it should be global and work with any theme, if you get stuck and have any problems let me know.

dev22
Shopify Partner
29 1 9

I have followed this code using the Debut theme.

My problem is that the jquery code does not seem to be working.

Jquery loads fine on my site, so no issues there.

My console is clean, no errors.

When the html loads on the site, it loads as 3 tabs, with the content inside tab 1 showing, and the content inside tabs 2 and 3 hidden.

So far, so good.

The problem comes when I click on another tab. Nothing happens. I expect the 'active' class to be removed from the first tab, and to be applied to the current tab that was clicked. This is not happening.

A funny thing, though, is that when I click the current active tab, the code works fine. I added a console.log to test, and I see that when I click that first active tab, the active class is removed, and then added. 

Any pointers appreciated.

I am placing this code all in a section on my site, if that makes a difference. It is a blank liquid file. Here is the code of the file:

   <div class="section-content">

     <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">
  inside 1
  </div>
  <div id="tab-2">
   inside 2
  </div>
  <div id="tab-3">
   inside 3
  </div>
</div>
     
     
      </div>


<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 {
  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: red;
  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: blue;
  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>

<script> 
  
    $(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');
        console.log('remove active');
        content.hide();
        active = $(this);
        content = $($(this).attr('href'));
        active.addClass('active');
        console.log('add new class active');
        content.show();
        return false;
      });
    });
  });
</script>
dev22
Shopify Partner
29 1 9

I found my problem. Was loading jquery twice.

femegull
New Member
1 0 0

HiI don't have theme.liquid option pls help me