Adding tabs to your product pages is not difficult--all you have to do is copy and paste a little code here and there. There are two different ways of adding tabs, depending on how you want them to function, so continue reading about the two methods below.
Wait! Are you using the Minimal theme?
I have another post about how to add tabs in the Minimal theme. Click here for that tutorial.
Adding tabs where 2 out of 3 tabs are the same for all products
Some store owners want to have tabs that are the same for all products, except for one tab which contains the product description. For example, you might have:
-
One tab for the product description (which varies for each product)
-
A second tab for shipping policies (which are the same for all products)
-
A third tab for return policies (which are the same for all products
If this is what you want, there is a handy article in the Shopify Wiki explaining how to do this, which you can access here.
Adding tabs that are all unique for each product
In my experience, more store owners prefer to have tabs that are completely unique for each product. For example, on a single product page you might have:
-
One tab for the product description
-
One tab for the product's ingredients, or instructions for how to use it, etc.
-
One tab for a video about the product
In the next few paragraphs I'll walk you through the simple steps for adding these tabs. You can also watch the video walkthrough directly below.
1. Create a duplicate of your Shopify theme as a backup
Just in case you mess something up and break your store layout, it's always a good idea to create a backup of your theme before changing the code. You can do this by going to your Shopify Dashboard > Themes, and then clicking "Duplicate" under the theme you are editing.
2. Check to see if your theme already has jQuery and jQuery UI
In order for these tabs to work, your theme will need to have both jQuery and jQuery UI. Most Shopify themes already have jQuery, and many already have jQuery UI, but make sure to check first. You can find out by opening "theme.liquid." This file can be found by going to your Shopify Dashboard, then clicking on Themes > Template Editor. If you have trouble finding this, watch the video tutorial above.
Inside theme.liquid, look for the head tag. It will look like this, but with a bunch of other code in the middle:
<head>
</head>
The first tag marks the beginning of the head, and the second marks the closing of the head. In between these two tags, look for a line of code that looks something like this:
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' | script_tag }}
OR
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
It will look one of those two lines above, but the numbers (1.4 or 1.9.1) don't have to match exactly. This is the code for jQuery.
Next, look for the jQuery UI code, which looks something like this:
{{ 'jquery-ui-1.8.6.js' | asset_url | script_tag }}
If you find that your theme already has both jQuery and jQuery UI, proceed to step 3. If you see jQuery but not jQuery UI, then copy only the jQuery UI line below. If you don't see either of these already in your theme, then copy and paste both of the following 2 lines of code right before the </head> tag:
Code you'll need to add jQuery and jQuery UI
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
3. Add a bit more code
Regardless of what you did in step 2, you should now add the following code directly before the </head> tag: <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script> $(function() { $( "#tabs" ).tabs(); }); </script>
4. Add this code to the individual product
Note that you are NOT adding this code to product.liquid, as that would put the same tabs on every single product in your store. Instead, open one of your existing products in your Shopify Dashboard, click the HTML editor button, and then copy and paste this code:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1 title</a></li>
<li><a href="#tabs-2">Tab 2 title</a></li>
<li><a href="#tabs-3">Tab 3 title</a></li>
</ul>
<div id="tabs-1">
<p>Insert tab 1 content</p>
</div>
<div id="tabs-2">
<p>Insert tab 2 content</p>
</div>
<div id="tabs-3">
<p>Insert tab 3 content</p>
</div>
</div>
Click "Update" or "Save" to save the changes you made to the product. Then go ahead and view the product on your website to make sure the tabs are showing up properly.
5. Edit the content of each tab to your heart's content After confirming that the tabs are working, continue using the HTML editor to change the tab titles and content.
Note: You may try to edit the tab content in the visual editor (rather than the HTML editor), but this tends to cause problems, since Shopify sometimes adds unwanted code that breaks the tabs. If you do this and your tabs stop working, you'll have to check the HTML editor and delete any unwanted code. You might have to come back here and copy and paste the code again.
I hope that went smoothly for you! If you had any problems, please leave a comment below with a description of the problem and I'll do my best to help.
UPDATE: How to change the appearance of these tabs using CSS
In the comments of this post, Melanie asked about how to change the appearance of these tabs to fit better with her Shopify theme. I made this video walking through some basic CSS styling--it's a bit long (22 minutes), but I think it will really help answer Melanie's question. As always, feel free to leave comments below with any other questions!
Having trouble getting this to work?
I'm happy to take a look and try to help you get this working, but please note that I can't help you unless you provide a link to your product page so I can see what you've done so far.
70 comments
I got the tabs to work on both the minimal desktop theme AND react mobile theme. I added some code given by a shopify support webpage. I still use the code you gave on your other blog post you did explaining how to make tabs for the minimal theme.
But…
I found it very difficult to add formatted text into each tab. Meaning – bullet points, paragraphs, headlines, etc..
I’m sure this was from the “ul” tags…
so I butchered up the code you gave on the other webpage and turned it into this:
Tab 1
Tab 2
Tab 3
Tab 1 content goes here.
Tab 2 content goes here.
Tab 3 content goes here.
I got rid of the ul tags and use divs. Any thoughts? Is this ok to do? It works for desktop theme and my mobile react theme.
THANK YOU FOR EVERYTHING – without your help, I wouldn’t have gotten this far.
Sounds great! Do you happen to have the link to that Shopify support webpage that you found?
Hey, if divs work, why not?
It was this one: http://docs.shopify.com/support/your-store/products/how-do-i-add-tabs-to-product-descriptions
:) Thanks again.
looks like the code with the changed divs (my alteration) isn’t working :(…
that said, the code with the ul tags DOES work on both my desktop minimal and react mobile themes. So, that link I posted in the post above this one is of value to readers because it helped me successfully get tabs on to my mobile react theme (which didn’t have tabs built into it as far as I know) that worked along side with the code to make the tabs work in my desktop version.
only issue now is…
adding formatted text into the tabs so that it looks nice and is easy to read.
Any ideas to make this easy? The issue is those UL tags which, when I hit enter it will automatically make another bullet point and mess with the tabs code that the content moves to another tab and all sorts of problems… Basically, I can’t use bullet points within a tab or it will mess it up. Bullet points must be represented with “-” which is ugly. You get the picture…
Any thoughts?
Hi Leighton,
using the Minimal theme here and have got the tabs working but this has resulted in the tag filter on the collection page to not work. Conflicting JQuery I think.
I NEED the below code in the bottom of my scripts.js.liquid file for the tabs to remain visible on click, but this make the filters stop working on collection pages. Any ideas what I have to change/remove?
{% if template contains ‘index’ %}$(‘a[href^=“#”]’).bind(‘click.smoothscroll’,function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$(‘html, body’).stop().animate({
‘scrollTop’: $target.offset().top
}, 500, ‘swing’, function () {
window.location.hash = target;
});
});
var tabs = $(‘ul.tabs > li > a’);
tabs.each(function(i) {
jQuery(this).unbind(‘click.smoothscroll’)
.click(function(e) {
var contentLocation = $(this).attr(‘href’);
if(contentLocation.charAt(0)==“#”) {
tabs.removeClass(‘active’);
$(this).addClass(‘active’);
$(contentLocation).show().addClass(‘active’).siblings().hide().removeClass(‘active’);
}
return false;
});
});
{% endif %}
This is the filter code for the collection page.
{{ collection.title }} {% if settings.collection_tags %} {% capture col_url%}{% if collection.url.size == 0 %}/collections/all{%else%}{{collection.url}}{%endif%}{%endcapture%} {% if collection.all_tags.size > 0 %} Filter by Colour: All items {% for tag in collection.all_tags %} {{ tag }} {% endfor %} {% endif %} {% endif %}Thanks in advance this is the last step in getting my store working for live release!!
Nick