How To Add Tabs To Shopify Store

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.

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.

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.

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.