Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
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.
Guides
- How To Create CUSTOM PRODUCT OPTIONS on Shopify 2.0
- How To Open External Links In A New Tab - Easy Shopify Tutorial
- How To Add Before And After Slider To Shopify - Easy 2022 Tutorial
- How To Add a Background Video To Shopify For Free
- How To Embed TikTok Videos To Any Shopify Page For Free
- Create Product Bundles Without The App - 2022 Easy Shopify Tutorial!
- Add Back to Top Button on Shopify Using Code: Detailed Tutorial
- How to Add A Custom Cart Icon on Shopify Using Code: Detailed Tutorial
- How to Add Breadcrumb Navigation to Your Shopify Store: DIY Tutorial Using Code
- How to Add Sales Countdown Timer to Your Shopify Store
- Cumulative Layout Shift Optimization: Causes and How to Measure It
- Ask How Customers Heard About Your Store On The Cart Page - 2022 Shopify Tutorial
- How to create a simple Quick View without app usage to your Shopify store
- Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
- How to Create A Page of Collections on Shopify Using Code
- Show The Number of Products Left in Stock on Your Shopify Product Page
- Change the Number of Products in the Collection Page- Shopify Tutorial
- DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial
- Add a Message to the Shopify Product Pages by Using Product Tags - 2022 Easy Tutorial
- How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial
- How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
- 6-step Tutorial on How to Add Wholesale To Shopify Store Without Shopify Plus
- How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
- How to add Hover Effect on Main Navigation Bar In Shopify
- How to Add A Gallery Page to Your Shopify Store without the App
- Disable Right-click to Protect Your Images on Shopify Using Code - Tutorial
- How to Auto Hide Sold Out Products on Shopify: DIY Tutorial
- DIY Code: How To Add Continue Shopping Button To Your Shopify Cart Page
- How to Create Custom Product Options on Shopify Without the App in 2022
- How to Select Variants By Clicking Their Images on Shopify
- How to Create a Custom Note Field on Your Shopify Cart Page
- How to Enable Custom File Upload Product Options on Shopify
- How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
- Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
- DIY Code To Add a Size Chart to Shopify Product Pages
- How To Redirect Shopify Customers After Login, Logout & Account Creation
- 4 Steps to Create a Sticky Header on Shopify: DIY Code
- How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
- Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
- Shopify Quick ADD TO CART Button On Collection Page Without The App
- How To Add a CUSTOM FONT To Your Shopify Store
2 comments
-
Good day,
thanks for the easy to follow steps.
But for step 5 the code is missing.
Thanks,
Sebastian
-
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
LEARN MORE
Get ahead with the latest in e-commerce and Shopify Plus
How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours
How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours
2 comments
Good day,
thanks for the easy to follow steps.
But for step 5 the code is missing.
Thanks,
Sebastian
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