Shopify Product Description Tabs: 5 easy steps to create your own – EcomExperts
Shopify Blog

Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions

Andrew Durot
8 min read

Add Shopify Collapsable Product Description

You don’t have to be a Shopify expert to add collapsable product description tabs in Shopify. Use this Shopify product description tabs tutorial to add product description tabs and make your product pages more user-friendly. If you want to organize your product information with Shopify product description tabs, just follow the steps in this tutorial.


Add Shopify Product Description Tabs

EcomExperts has a shopify product description tabs video tutorial on YouTube. The video gives you some context; you can watch it and follow along with this guide. Otherwise, for description tabs Shopify, follow these steps.


Tabbed in Description Shopify Tutorial

Step 1: Check JQuery


To make Shopify product page tabs, we will need to be sure that JQuery library is added in our code. We will need to check inside the tag <head> in theme.liquid to see if the next code is there. If it’s not, we need to add it :


 <script src="//code.jquery.com/jquery-1.11.3.js"></script>


Step 2: Add HTML code to your product page


Now we need to add some HTML code to your product page. To do that, go to the Products section in your admin panel, and select the product you want to edit. Once you are in, you need to select this icon <>, where you will see the HTML code that will be injected in your product description. Copy and paste the code that we added in our document:

 

<div class="cgt-desc">

 <ul class="tabs clearfix">

 <li><a href="#tab-1" class="active">Description</a></li>

 <li><a href="#tab-2">Size Chart</a></li>

 <li><a href="#tab-3">Shipping & Return</a></li>

 <li><a href="#tab-4">Videos</a></li>

 </ul>

 <div class="cgt-content">

 <div id="tab-1" class="tab active">

 Enter Product Description Over Here.

 </div>

 <div id="tab-2" class="tab">

 Enter Size Chart Over here table, images, etc.

 </div>

 <div id="tab-3" class="tab">

 Enter Shipping & Returns details over here.

 </div>

 <div id="tab-4" class="tab">

 Enter youtube video , vimeo ,etc embed code.

 </div>

 </div>

 </div>


Step 4:  Add JS


 Adding the logic for the tabs is quite easy. Open up your product.liquid template file, then go to the bottom of the file and paste the following code :


<script>

 $(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;

 });

 });

 });

 </script>


Step 5: Adding CSS


Now, in the same template as before, we will add the next code that will add the style to our tabs:

<style>

 .cgt-desc{

 font-family: Arial;

 }

 

 .cgt-desc ul.tabs{

 margin: 0px;

 padding: 0px;

 border-radius: 0px;

 top: 1px;

 position: relative;

 }

 .clearfix{

 clear: both;

 }

 

 .cgt-desc ul li{

 background-color: #fff;

 display: inline-block;

 position: relative;

 z-index: 0;

 border-radius: 0px;

 margin: 0 -5px;

 padding: 0;

 }

 

 .cgt-desc ul li:first-child{

 margin: 0px;

 }

 

 .cgt-desc ul li a{

 display: inline-block;

 border: 1px solid #e9e9e9;

 padding: 1.2em 1em;

 font-weight: 700;

 color: #515151;

 text-decoration: none;

 font-size: 12px;

 text-transform: uppercase;

 }

 

 .cgt-desc ul li a.active{

 background: #fafafa;

 border-bottom-color: #fafafa;

 }

 

 .cgt-desc .tab{

 display: block;

 border: 1px solid #e9e9e9;

 padding: 15px;

 background: #fafafa;

 font-size: 14px;

 border-radius: 0px;

 }

 </style>


 

Step 6: Testing


Now it's time to check if everything is working properly, and all we can say is good job


We hope you got the most out of this tabbed in description Shopify tutorial, and that you were successfully able to add product tabs. Your product information should be clearly tabbed in product description. If you have questions or problems, don’t hesitate to contact us.



2 comments

  • Good day,

    thanks for the easy to follow steps.

    But for step 5 the code is missing.

    Thanks,

    Sebastian

    Sebastian Wilken
  • Hi,
    Great tutorial ! Thanks for making it.
    However, I cannot see the css code for the the last step. The registration form is in the way. I’ve fill it out 3 times but still cannot see the code. Help me please.
    Step 5: Adding CSS
    No Code
    Thanks,
    Jim

    James

Leave a comment

Guides

2 comments

  • Good day,

    thanks for the easy to follow steps.

    But for step 5 the code is missing.

    Thanks,

    Sebastian

    Sebastian Wilken
  • Hi,
    Great tutorial ! Thanks for making it.
    However, I cannot see the css code for the the last step. The registration form is in the way. I’ve fill it out 3 times but still cannot see the code. Help me please.
    Step 5: Adding CSS
    No Code
    Thanks,
    Jim

    James

Leave a comment