Add Tabs to Your Product Pages in Shopify

There are several reasons why you should consider adding tabs to your Shopify product pages:

• Less clutter – Tabs allow you to reduce the number of words that are displayed on your product pages, helping you avoid a cluttered, “wall of text” look that may drive visitors away.

• More sophisticated – Tabs are a subtle, elegant way to provide different types of product information, making your site appear more advanced and professional than others.

• Better user experience – While grouping all of your product information in one long description can make it difficult to find individual details, breaking up this information into separate tabbed sections will help visitors quickly find what they’re looking for.

Convinced that you should be using this technique on your own store? In this guide, we’ll go over everything you need to know to add tabs to a product page in Shopify. 

Checking Your Theme for Tab Support

Your current theme may already support the use of tabs in your product descriptions.

To check on this, select the “Online Store” option in the left sidebar of the main Shopify dashboard.

Select the “Customize” option next to the theme you’re currently using.

This will open Shopify’s built-in theme editor. Use the dropdown menu near the top of the page to select the default product page template. 

Select the “Add block” option in the “Product information” section of the left sidebar.

Select “Collapsible row”.

You’ll find that Shopify’s default Dawn theme, as well as many other options available in the Shopify Theme Store, have this “Collapsable Row” block that you can use to create vertical tabs in your product descriptions.

However, if you want horizontal, manila folder-style tabs or some other type of custom style for this section, you’ll need to either edit your site code or use a third-party app. 

Adding Tabs to Your Product Descriptions Using Shopify Liquid

Regardless of your theme’s default options, you can add and customize tabs to your product descriptions by using Liquid, Shopify’s open-source template language. 

First, go back to the “Online Store” section of the Shopify dashboard and open the “…” menu next to the theme you’re currently using (this option is just to the left of the “Customize” button we referenced earlier). 

Select “Edit code”. 

Go to the “Sections” folder and open the “main-product.liquid” file. 

Add the following code to the “main-product.liquid” file:

<script type="text/javascript">
  $(document).ready(function(){
    $('ul.shopify-tabs > li').click(function(){
      var tab_id = $(this).attr('data-tab');

      $(this).parent().find('li').removeClass('current');
      $('.shopify-tab-content').removeClass('current');

      $(this).addClass('current');

      $("#"+tab_id).addClass('current');

    })

  })

</script>

Once the code has been added, save your changes. 

Then, go to the “Assets” folder and open the “base.css” file.

Add the following code:

ul.shopify-tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.shopify-tabs > li{
    background: none;
    color: #333;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

ul.shopify-tabs > li.current{
    background: #f0f0f0;
    color: #333;
}

.shopify-tab-content{
    display: none;
    background: #f0f0f0;
    padding: 15px;

}

.shopify-tab-content.current{
    display: block;
}

Again, save your changes once the code has been added.

Now return to the default product page template in Shopify’s theme editor, and select the “Add section” option in the left sidebar.

Select “Custom Liquid”.

In the “Custom Liquid” text box (found in the left sidebar), enter the following code:

<ul class="shopify-tabs">

  <li class="current" data-tab="tab-description">Description</li>
  <li data-tab="tab-specs">Product Specs</li>
  <li data-tab="tab-delivery">Delivery</li>
  <li data-tab="tab-returns">Returns</li>

</ul>

<div id="tab-description" class="shopify-tab-content current">
  Description tab content
</div>

<div id="tab-specs" class="shopify-tab-content">
  Specs tab content
</div>

<div id="tab-delivery" class="shopify-tab-content">
  Delivery tab content
</div>

<div id="tab-returns" class="shopify-tab-content">
  Returns tab content
</div>

Through the Liquid code in this text box, you can also customize the labels and content of each tab. 

Using Shogun to Add Tabs for Your Product Descriptions

Shogun makes it even easier to add tabs to your product pages in Shopify, and this method is more customizable as well. 

Importing products into Shogun 

If you want to add content within tabs that is unique, such as product specifications or any other information that is related to an individual product, your best option is to import the product from your Shopify catalog and make the edits directly in Shogun’s visual editor. 

After downloading and opening the Shogun app, enter the name of the product page you want to customize in the search bar near the top of your screen.

Select “Import page”.

Once the page is imported, search for it again and then click on the page to open it in Shogun’s visual editor. In the left sidebar of the editor, you’ll find a variety of elements that you can use to quickly design pages for your store — including a “Tabs” element. 

You can place the “Tabs” element wherever you want on the page, and you’ll be able to fully customize both the content and design of your tabs without writing any code.

It should be noted that these tabs are mobile-responsive by default. You can see what your store looks like on different types of devices and make edits accordingly by toggling through the different options at the top of your screen (desktop, laptop, tablet, and mobile views are available).

Theme sections

Shogun also allows you to save any content you create within the app as a reusable Shopify theme section. Once saved, you can insert this chunk of Shogun content into any page on your store through Shopify’s built-in theme editor.

This is an ideal solution for when you’re adding tabs for content that is not unique to an individual product, such as:

• General FAQ
• Universal shipping policies
• Universal return and refund policies
• Generalized sizing charts
• Brand testimonials

There’s no reason to keep making the same content over and over again. If a tabbed section can be universal for many different product pages, then using Shopify theme sections will allow you to save a significant amount of time.

Product templates

You can also save entire page designs that you make in Shogun as a reusable product page template.

This feature can be used to create a layout of a product page with tabs. You can also create a separate layout with a different style of tabs section or even no tabs at all. In other words, you’ll get the time-saving benefits of reusable content while still retaining the flexibility to organize your product information however you see fit for any given product.

Whenever you update one of your product page templates, these changes will automatically be reflected on every page that uses that template — this is yet another way that Shogun allows you to spend less time on web development and more on training your staff, improving your products and services, and everything else that goes into making your Shopify store successful. 

Indeed, this is an especially useful feature for growing businesses, as you’ll be able to scale up without creating a ton of extra work for your website. And this makes it a good tool for businesses that are already quite large as well. 

For example, when GE Appliances, one of the top consumer appliance brands in the world, started investing more heavily in their direct-to-consumer web channel, they turned to Shogun to help them generate ecommerce content faster. 

GE Appliances realized that in order to adequately respond to the customer preferences they were discovering through market research, they would need to be able to quickly publish and edit the content on their online storefronts. Before Shogun, they had to rely on outside developers, and it took weeks (and a considerable expense) to get updates published.

Then they made the switch — Shogun’s intuitive visual editor and reusable custom templates allowed GE Appliances to produce hundreds upon hundreds of pages while spending much less time and money on each update. 

Other Customization Options Merchants Should Consider for Their Product Descriptions

In addition to adding tabs, there are many other ways that you could customize your product descriptions to improve user experience and increase sales, such as:

• Translating product descriptions for certain regions
• Adding links to related or recommended products
• Promoting free shipping for a particular product using a banner
• Adding SEO keywords to attract more potential customers to the page
• Using Targeted Experiences to show different product descriptions to different types of users — for example, traffic from an influencer marketing campaign can be shown a description that references the influencer, while everyone else still sees the default description

Shogun makes it easy to do all this (and more) for your Shopify product pages.