Shopping Cart
How to add tabs in product descriptions Shopify?

How to add tabs in product descriptions Shopify?

At first before going through this tutorial, please check your theme documentation, if it supports product description tabs or not. As all themes are different, no single method will serve all themes perfectly. So, those of you without a technical background may end up contacting a Shopify Expert to handle the additional technical pieces that may be required. However, it is actually easier than you may think. Here is a step-by-step breakdown how you can add tabs to your product descriptions.

If you are using the free theme from Shopify that do not support product description tabs, and want to add tabs to your product pages, I'll show you exactly how to add horizontal tabs in this tutorial.

Product Description View

Steps to add tabs to product descriptions:

  • Making sure JQuery is installed
  • Adding HTML code to your product descriptions
  • Adding JavaScript code
  • Adding CSS code for styling

Step 1. Making sure JQuery is installed

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

Most themes use jQuery, but just to be sure, check your theme.liquid file for the presence of jQuery inside tags.

If your theme does not already use jQuery, you will need to include jQuery in the head of your document. To check if you're already using jQuery, open the theme.liquid file in the online code editor.

Step 2. Adding HTML code to your product

Product Description Code View

<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>
Adde Code Description

Step 3. Adding JavaScript code

Adding the logic for the tabs is quite easy. Open up your product.liquid template file and paste the following code at the very bottom of the file:


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

Click Save.

Info: If you don't want to add the above script under product. liquid template, then you can add at then bottom of theme script file under an assets folder. Please remove <script></script>

Step 4. Adding CSS code for styling

Adding the style for the tabs is quite easy. Open up your product.liquid template file and paste the following code at the very bottom of the file:


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

Click Save.

Info: If you don't want to add above style under product.liquid template, then you can add at then bottom of the theme stylesheet file under an assets folder. Please remove <style></style>

 

Thank you for visiting us! You now know how to add tabs to your Shopify store. Please comment below if you find any problem, I will reply as soon as possible. If you need help to integrate for 25USD contact us.

Older Post Newer Post


RELATED ARTICLES

Top 15 Free Shopify Apps to Boost Sales 2017

Top 15 Free Shopify Apps to Boost Sales 2017

More than fifteen thousand entrepreneurs or business use Shopify platform to sell products online. Shopify offers many  apps to the store owner, some of them are free & for some you have to pay money. Many owners prefer to use free apps because they can generate revenue at no cost. More than 1200 Apps are available in the Shopify App store and all have their own importance and also provides help in day-to-day tasks. On today's topic we are going to share the free Shopify Apps to boost sales and the listed apps are used by many store owners. Top 15 Free...

Read more →

Expand order summary by default on responsive checkout Shopify

Expand order summary by default on responsive checkout Shopify

Providing heavy discount and still getting lots of abandoned cart? Here may be the reason, as Shopify announced the responsive checkout the "Order Summary" remains collapsed by default for mobile and tablet users.

Read more →