To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

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)
cassoot
New Member
1 0 0

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

BeauxW
New Member
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.
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.

Explorers
Tourist
3 0 1

Hey, thanks for your helpful post. Just wondering if you could share the CSS for aligning the tabs in the CENTER of my product description section.

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. 

crlifestyle
Tourist
4 0 1

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

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

Coding
New Member
1 0 0

What code did you use for the shipping snippet?

rv2701
New Member
1 0 0

I have implemented this in DEBUT and it's working so well, but I have a problem. After adding this code section "YOU MAY ALSO LIKE" is not visible. How to show you may also like a section in DEBUT theme

Stevie
New Member
2 0 0

Hi, can you please explain more fully (layman terms) what these mean-

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.

pinkgerbil
Tourist
11 0 2

How did you get it to work Theriion?

Theriion
Excursionist
33 0 7

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

 

 

 

elydenise
New Member
2 0 1

Hi Stevie, did you manage to solve your question?

phil_CM
Excursionist
81 1 8

TyW, i'm curious, why the following?

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.

Why concerned about the shipping info but not returns info?

Also I assume that render adds some kind of no index property to the content?

RhysAsmara
Excursionist
40 0 3

RhysAsmara_0-1621488108261.png

which bit am I meant to be replacing exactly do I replace for the code???

also can some please check if my code if correct 

<div>

  <ul class="tabs">

    <li><a href="#tab-1">Description</a></li>

    <li><a href="#tab-2">Returns</a></li>

    <li><a href="#tab-3">Size Chart</a></li>

    <li><a href="#tab-4">Pre-Order</a></li>

 

 

  </ul>

  <div id="tab-1">

  {{ product.description }}

  </div>

  <div id="tab-2">

  {% render 'refund' %}

  </div>

  <div id="tab-3">

  {{ pages. SIZING.CHART.content }}

  </div>

<div id="tab-4">

  {{ pages. Asmara.Butik.Preorder.Form.content }}

  </div>

</div>

 

Thanks

 

phil_CM
Excursionist
81 1 8

you replace {{ product.description }} with the code.

RhysAsmara
Excursionist
40 0 3

@phil_CM thanks mate I found I different code that was slight easier to use. 
fill free to check out what I have done here 

AttaRehman
New Member
2 0 0
Hello there,

Your tabs look awesome, is it possible to share the code and instructions.

Thanks mate.