How To Add Tabs To Shopify Store [2024]
Shopify - 3 Day Free Trial - No cc Needed   Free Trial
Detect Shopify Theme

Or go to our Shopify Theme Detector directly

How To Add Tabs To Shopify Store

Last modified: June 14, 2024

How To Add Tabs To Shopify Store
Free 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 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.

Key Takeaways
1
Login to Shopify admin to start adding tabs to your store’s theme.
2
Edit the product-template.liquid file to include custom tabbed sections for product info, shipping, and returns.
3
Add jQuery script in assets/theme.js for tab functionality and content display control.

Recommended: 10 Best Apps to Get Shopify Product Tabs – [2024]
# Name Image
1
Free Tabs
Free Tabs
2
Easy Tabs ‑ Product Tabs
Easy Tabs ‑ Product Tabs
3
Free Product Tabs ‑ Easy Tabs
Free Product Tabs ‑ Easy Tabs
4
Product Tabs | Size Chart
Product Tabs | Size Chart
5
Magic Tabs
Magic Tabs
6
Product Description Tabs & FAQ
Product Description Tabs & FAQ
7
TabMe ‑ Product Tabs
TabMe ‑ Product Tabs
8
Custom Product Accordion Tabs
Custom Product Accordion Tabs
9
CWS Simple Product Tabs
CWS Simple Product Tabs
10
Tabs by Station
Tabs by Station
Show More

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>

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.

Keep Reading

Conclusion: 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. Additionally, proper store setup is crucial for a seamless customer experience, so be sure to optimize your store’s layout and navigation.

FAQs
  • Can adding tabs to my Shopify store impact its loading speed?

    Yes, adding tabs can impact loading speed, especially if they contain heavy content like images or videos. It’s crucial to optimize these elements to maintain a fast, responsive site.

  • How do I ensure my tabs are mobile-responsive?

    To ensure your tabs are mobile-responsive, choose a theme that is inherently responsive or use CSS and HTML that adapt to different screen sizes. Third-party tab apps usually offer mobile-responsive designs as well.

  • Can I add tabs to my Shopify store without coding?

    Yes, you can add tabs to your Shopify store without coding by using third-party apps available in the Shopify App Store. These apps often provide a user-friendly interface to customize and manage tabs.

Got Something To Say?

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