Spy on Your Competitors - Extended Free Trial!  GO!
How To Add Tabs To Shopify Store

How To Add Tabs To Shopify Store

Last modified: August 12, 2020

FAQ
Shopify Trial

Adding tabs to your Shopify store is an easy option for most people. Some themes will automatically have the option available for you and there are some apps that allow you to add tabs onto your site. You can find a list of those apps here.

However, if you’re looking to add tabs to your products page using code, then you need to follow the steps below. Please note that all themes are different. Therefore, this is a general guide and some aspects of the step-by-step instruction will be different for the particular theme you’re using. If you’re in doubt, you can speak to the theme developer to find out what file or other element you should be using on your website.

Show More

* This button will show the rest of the post and open up an offer from Shopify

Step 1 – Login

The first thing you should do is to login to your Shopify admin page.

Step 2 – Themes

Now check your ‘Online Store’ and then the ‘Themes’ option. Find the theme that you’re currently using, if you have more than one installed, and then click on that ‘Actions’ and then ‘Edit code’ option on the corresponding theme.

Step 3 – Theme.liquid File

Find the theme.liquid file within the list of files that shows up. Within this file find the term ‘jQuery’. If it is not in the file, then you will need to add jQuery into your theme. Otherwise you can just continue.

Step 4 – Product Template

Next go to the product-template.liquid template that is within your theme files and open that up in the code editor. You need to locate the product description area, it should look like:

{{ product.description }}

You now need to replace it with this 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>

Within the first tab, which is labeled as info, you will add the liquid tag for the product description within the div holding the tab’s content.

Within the second tap, you can render a snippet that contains the shipping information for the customer. Remember that this is done as a snippet to prevent it from being indexed by search engines and for it not to display within searches on the site.

The third tab, is where you can place the content of the returns information for your store.

Now these items can be changed. For instance, you could create a sizing tab or an FAQ tab.

Step 5 – Add jQuery

Now you need to add some JavaScript code into your assets/theme.js file. You can find this within your theme files within the current theme. The code you need to add is:

$(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;
      });
    });
  });

And that should complete your tabs.

Final Word: How To Add Tabs To Shopify Store

Adding tabs to your website is a good way to provide lots of information in a clear layout that doesn’t clutter a website page. However, you don’t need to use the code above. You could use a tab App like Tabs by Station App. There is a free plan available, but the premium version is much better.

Recap:
Got Something To Say?

Your email address will not be published. Required fields are marked *

Free Trial