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 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 your product information in one long description can make it difficult to find individual details, breaking it into separate tabbed sections will help visitors quickly find what they’re looking for.

Are you convinced that you should be using this technique in your 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 using 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 and 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 custom style for this section, you’ll need to 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 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:

Once the code has been added, save your changes.

Then, open the “Assets” folder and 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.

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:

• • Description

 

• • Product Specs

 

• • Delivery

 

• • Returns

 

 

 

 

 

 

You can customize the labels and content of each tab through the Liquid code in this text box.

Using Shogun to Add Tabs for Your Product Descriptions

Shogun makes adding tabs to your product pages even easier in Shopify, and this method is also more customizable.

Importing products into Shogun

Suppose you want to add unique content within tabs, such as product specifications or any other information related to an individual product. In that case, 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 can fully customize 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 your store’s appearance on different devices and edit accordingly by toggling through the 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 save you significant time.

Product templates

You can also save entire page designs made in Shogun as a reusable product page template.

This feature can be used to create a product page layout with tabs. You can also make a separate layout with a different style of tabs section or even no tabs. In other words, you’ll get the time-saving benefits of reusable content while 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 a handy feature for growing businesses, as you can scale up without creating extra work for your website. This also makes it a good tool for already quite large companies.

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 to adequately respond to the customer preferences they discovered through market research; they would need to be able to publish and edit the content on their online storefronts quickly. Before Shogun, they had to rely on outside developers, and publishing updates took weeks (and a considerable expense).

Then they made the switch — Shogun’s intuitive visual editor and reusable custom templates allowed GE Appliances to produce 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.