• How to add tabs to the Shopify product page

     

    If you have a lot of product information on your page, you may find it a headache to navigate, configure & maintain all the content and make it readable. If you have overloaded page, you can either add tabs to product page & create a structure to organize your data which will prevent the page from becoming too “heavy” just press one button and install the app, or you can leave it as is and lose customers who might be bored by a ton of plain text.

    If your customers can’t read through all the information about your product, its ingredients, and all necessary info about shipping and so on, most of them will probably close the page without the feeling that they need your product. 

    It’s vital for your store to have a tidy product page with product page tabs that will attract customers, so it’s smart to split up your product information using Shopify product description tabs. You can create product tabs for each part of the product description in your Shopify store. You can select tabcontent, create folder & preview your tabs with our tutorial. Easily change, and paste necessary tabs information with editor.

    SOLUTION 1. Use a theme with built-in tabs functionality

    Some Shopify themes have built-in tabs functionality which can help you create tabs.

    Pros:

    • Free of charge. You’ll only need to pay for the theme. 

    Cons:

    • The limited functionality of tabs creation in some themes means you’ll be able to create only a very small number of tabs
    • Native theme tabs aren’t editable and you won’t be able to edit their layout. You may get something that doesn’t meet your expectations.

    SOLUTION 2. Add tabs to your theme by yourself

    You can also modify your theme and add the tabs code by yourself. This option will give you freedom to customize the tab views. To achieve your target, you may use following code, just add it to your product.liquid template:

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

    To make your tabs look properly, you should also add some CSS styles to your theme's CSS file. Usually, it called like assets/styles.css or assets/style.scss.liquid but file name may vary depending on your theme. Add following code to the end of the file:

    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;
    }
    

    Actually that's it. Now you may add tabs to your Product Description using proper HTML formatting:

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

    Pros:

    • Free of charge
    • Flexible tab creation

    Cons:

    • It is time-consuming to add code to your template
    • You need some basic knowledge of CSS to modify your tabs’ appearance.

    SOLUTION 3. Use EasyTabs app to add tabs to shopify product page

    There is also another option that allows you to have an unlimited number of easily created and editable tabs for a low monthly fee. Give the EasyTabs app a try if you don’t want to waste your time to create tabs on your product page.

    EasyTabs can help you split product descriptions into tabs and add common tabs for a wide range of products in a few clicks.

    This app has a number of layout settings that can help you achieve the layout you want:

    Here you have a free space to experiment with different tabs styles – something you can never do with a native theme’s tabs.

    And there are a lot of other options for the tabs’ appearance. But if you want to modify the appearance even more than is possible within the app’s settings, you can always contact us. We’ll do our best to make the app meet your wishes.

    Pros:

    • It’s easy to create tabs
    • No limits on the number of tabs
    • Fully editable layout
    • Ability to create the unique set of tabs for different products
    • Create common tabs for a wide range of products in a few clicks
    • A lifetime support
    • And much more!

    Cons:

    • A small monthly fee.

    Instruction:

    EasyTabs has two ways to add tabs to your products: Standard tabs and Static tabs. 

    Standard tabs are created based on the product description text. If you want to have a unique set of tabs per product, you should use this type. To create Standard tabs, please perform the following steps:

    1. From your Shopify admin, go to Products
    2. Choose the product
    3. Add the content of tabs with their titles to the “Description” field:
       

    4. Select text fragments which will be the titles of tabs: 


    5. Select the formatting tag:


      This tag is set in the app settings (Heading 5 by default):


    6. Save the changes and tabs will appear

    Static tabs are created in the app admin. This type is useful for some content that is the same for all the products, like Shipping terms, Reviews tab, and so on. To add Static tabs, please perform the steps below:

    1. From your Shopify admin, go to Apps -> Easy Tabs - Product Tabs
    2. Scroll down to the “Static Tabs” section
    3. Click the “Add static tab” button: 


    4. Enter the title and content of the tab: 


    5. Choose if you want to assign the tab to all products or a certain group of products
    6. Save the changes



     

Try our great Shopify Apps to improve Store UI/UX and increase your sales!

Check out our Shopify Apps