If you’re looking to add some extra flair to your Shopify store, one way to do it is by adding a collapsible accordion for product descriptions. This can help break up longer descriptions and make them more visually appealing. Plus, it’s a relatively easy thing to do! In this post, we’ll show you how to create a collapsible accordion for product descriptions in Shopify. Read on to learn more.
Add Code in Theme.liquid File – First Step
Add following code below <head> in “Theme.liquid” file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>Add Code in CSS File – Second Step
Add the following code in the CSS file of your Shopify Theme
/* Accordion CSS Code by WebSensePro.com
https://websensepro.com/blog/how-to-create-collapsible-accordion-for-product-description-shopify/
*/
.accordion {
margin: 1rem 0;
padding: 0;
list-style: none;
border-top: 1px solid #e5e5e5;
}
.accordion-item {
border-bottom: 1px solid #e5e5e5;
list-style: none !important;
}
/* Thumb */
.accordion-thumb {
margin: 0;
padding: 0.8rem 0;
cursor: pointer;
font-weight: normal;
}
.accordion-thumb::before {
content: '';
display: inline-block;
height: 7px;
width: 7px;
margin-right: 1rem;
margin-left: 0.5rem;
vertical-align: middle;
border-right: 1px solid;
border-bottom: 1px solid;
transform: rotate(-45deg);
transition: transform 0.2s ease-out;
}
/* Panel */
.accordion-panel {
margin: 0;
padding-bottom: 0.8rem;
display: none;
}
/* Active */
.accordion-item.is-active .accordion-thumb::before {
transform: rotate(45deg);
}Add Code in JS File – Third Step
Add the following code in JS file of your Shopify Theme
// Accordion by WebSensePro.com
$(function() {
// (Optional) Active an item if it has the class "is-active"
$(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown();
$(".accordion > .accordion-item").click(function() {
// Cancel the siblings
$(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp();
// Toggle the item
$(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
});
});Create Meta Fields – Fourth Step
Go to Shopify > Settings > Metafields, as per the screenshot below:
Create Meta Fields as per the screenshot below:
Make sure to carefully match the Meta Feilds name from the fourth and fifth step.
Add Code in Product-template.liquid File – Fifth Step
Add the following code in your “product-template.liquid” File by replacing “{{ product.description }}” code
<ul class="accordion">
<li class="accordion-item is-active">
<h3 class="accordion-thumb">{{ product.metafields.my_fields.first_tab_title }}</h3>
<p class="accordion-panel">{{ product.metafields.my_fields.first_tab_description }}</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">{{ product.metafields.my_fields.second_tab_title }}</h3>
<p class="accordion-panel">{{ product.metafields.my_fields.second_tab_description }}</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">{{ product.metafields.my_fields.third_tab_title }}</h3>
<p class="accordion-panel">{{ product.metafields.my_fields.third_tab_description }}</p>
</li>
</ul>Result:
The result should show accordions similar to the following screenshot:
14 thoughts on “Shopify – How To Create Collapsible Accordion for Product Description”
Does this work in Shopify 2.0?
Yes it does.
How would I change where the accordion is located?
Play with the liquid code
Thank you so much for this, This works great! Just a quick question.
Is it possible to put HTML text in the drop downs? For ex. If I put any HTML based text for paragraphs, bold fonts, bullets etc. or even an ingredients table it will no longer collapse and always stays expanded. It shows up correct and styled properly but will no longer collapse.
ex. If I paste anything like this in one of the description metafields it will show an ingredients table perfectly but wont collapse. This is just a snippet to show what I mean by HTML text.
Nutrition Information
Calories (kcal)400
Fat (g)<span…
Yes it’s possible with Liquid code
I’m using theme Taste version 3.0.1- and some of the codes don’t show up? is this normal?
Nop this tutorial is not suitable for Taste theme, if you want the same feature in taste theme please email [email protected]
Hey, this is not working
Please share more details starting with your theme name and version
Thank you for this tutorial. Is it possible to display accessory products in the drop downs which can be selected by the customer?
Hello for some reason the text in the title and the description does not work?? I have checked all the correct text in the code, also does this accordian show links?
Yes, you will have to add HTML
hey i cannot find product-template.liquid file, what do i do?