How To Add Tabs To Shopify Store

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 to 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.

Step 1 - Login to Shopify Admin

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.

You can create tabs by using HTML code and adding new divs for each tab. 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. You can also add an opt-in for order updates and enable push notifications for customers to receive real-time updates on their orders.

The third tab, is where you can place the content of the returns information for your store. You can also include a pickup in-store option and add schema to improve visibility on search engines.

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

Additionally, you can add filters to your store to help customers narrow down their search and find products more easily. A Buy Button to Instagram can also be added to allow customers to purchase products directly from your Instagram page.

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.