Product pages - Add tabs to product descriptions

TyW
Community Manager
Community Manager
435 50 1183

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)
kyle_zen
Visitor
1 0 1

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?

kpvw
Shopify Partner
96 3 18

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 😃

deejaydev
Shopify Partner
5 0 1

I am new to working with Shopify/liquid.

I was able to create the tab's review and but would like to add 3 pages (I already created) of  contents in these tabs (refunds, Delivery, Installation)


I am not sure what I am doing wrong here: 

    <div id="tab-1">
            {{ product.description }}
            </div>
            <div id="tab-2">
                <div id="shopify-product-reviews" data-id="{{product.id}}">
                  {{ product.metafields.spr.reviews }}
				</div>
            </div>
            <div id="tab-3">
				{{ pages.refunds.content }}
            </div>
            <div id="tab-4">
				{{ pages.delevery.content }}
            </div>
            <div id="tab-5">
				{{ pages.installation.content }}
            </div>

 

The product page is: https://www.pavementmaterials.co.za/collections/tumbles-natural-river-pebbles-supplier-south-africa/...

 

Thanks

JPV
Visitor
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
31 1 10

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
31 1 10

I found my problem. Was loading jquery twice.

greghuntoon
Shopify Partner
4 0 1

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.

Site-Pro
Shopify Partner
9 0 2

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?

VeganSkincare
Visitor
1 0 3

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

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

 

Site-Pro
Shopify Partner
9 0 2

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.

reena
Visitor
2 0 0

Brilliant thank you will check it out 🙂

Many thanks

 

DavidB1
Shopify Partner
6 0 1

After failing to get the code to work on Debut theme theme this app worked for me thank you. 

Daez
Visitor
1 0 0

hi just checked your page, can you share how you were able to and the ingredents for each tab, especially the ingredients. Did you have to create separate pages?

BeauxW
Visitor
1 0 0

Hi, I saw your website, and its beautiful, did you create your own code for the tabs? I still see the elements used in this thread but its a little bit different

Site-Pro
Shopify Partner
9 0 2
I used Tabs by Station from the app store. Free version available but I
upgraded to $3 mo so I could use custom colors to match my store.
Coding
Visitor
1 0 0

What code did you use for the shipping snippet?

AttaRehman
Visitor
2 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.
Theriion
Excursionist
33 0 8

Hi

First of all great guide. I managed to get it working just fine. Thank you very very much. I do have a question however. 

Is there a chance to make one of the tabs in such a way that it would only pull content from lets say H6 out of the product or a custom page?

 

I will be having some products where I need to have specific info added and cant have it for all products. So I am looking for solution where I could have created two custom pages. and then assign one of them to some products and second to the rest of the products. Alternatively could maybe try the H6 from the product? Is this possible at all? If so how?

 

Any advice would be much appreciated.

 

thanks very much 

 

regards 

Theriion

Theriion
Excursionist
33 0 8
Actually I didn't manage to make it work fully. I'm also struggling with the returns tab.
No matter what I try to use it is blank.
Even when I creat custom snippet or page and try to link it to this tab it's always empty .
How can I fix this please? Thanks

Kind regards
Theriion
autohomestore
Visitor
2 0 0

Theriion, 

 

In my case, I had to delete an extra closing div at the bottom of the code as it didn't link to anything and it worked. 

 

Closing div: </div> 

You can work out if it has an opening div by just clicking on it and it will highlight the start div orange as well as the one you have just clicked. Hope this helps! 

Naor
Explorer
131 1 12

@TyW how can i make one of the buttons - how to use

and connect this buttons to each product ?

pinkgerbil
Tourist
11 0 2

How did you get it to work Theriion?

Theriion
Excursionist
33 0 8

Hey.

 

Im not sure but it might help... 

FYI I'm using Brooklyn theme

Follow all the steps described by the author with only difference for last step - adding CSS - It needs to go to the bottom of timber.scss.liquid. It could be that for other themes it needs to go somewhere else (like described by the author), I simply don't know. My knowledge is very limited in this stuff 🙂 

Thx

 

 

 

Jajo
Visitor
1 0 0

Nice guide!

 

but how can i set tabs in order to take only certain paragraphs in the product Description?

 

i mean:

<div id="tab-1">
{{ product.description }}

 

with this tab-1 takes all the description, but i want that tab-1 takes only some paragraphs in the product description form, and tab-2 (i.e. "ingredients") takes others paragraphs below, and so on (tab-3/4/5).

 

what i have to write in product-template.liquid?

and in the product description form, what i have to write (HTML) to separate paragraphs for the different tabs?

Thanks in Advance,

Jajo

Pomp
Visitor
3 0 0

Hi guys, 

 

I know this thread is a little old, but I am trying to make an image under the description tab full width, however there seems to be margins on either side of the description/tab.

Can anyone point me towards the parameters for this?



 

Site-Pro
Shopify Partner
9 0 2
Use free app Tabs by Station. So much simpler and looks great.
AlessandraL
New Member
4 0 0

Hello! 

Great tutorial - I've added 3 tabs and I'm very happy with them. Check out my results here https://alessandra-luciano.com/collections/all-scarves/products/extravaganza-pink-silk-scarf.

Not sure if this has been answered already but how can I add another tab? 

s_info
Visitor
1 0 0

crlifestyle
Tourist
4 0 1

hi did you added something to display the page on the Shipping? it's not displaying on my side

cassoot
Visitor
1 0 0

I managed to add another 2 tabs but how do I link the tabs with pages? Please help, thank you.

Wasif3
Excursionist
59 1 7

Wasif3_0-1602182257790.png

Can you please tell me that I have added "info" "shipping" and "return" tab but when I add product description then all the description is shown on the info page as it is shown in the picture can you tell me how to edit these tabs

you can check it by your self

url:pakistantiedye.myshopify.com

password:Student2951

Site-Pro
Shopify Partner
9 0 2

I recommend you remove your login details. You are not on a secure page.

If you use the app, Tabs by Station, you should not have any further issues.