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:
28 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 the black text does not show and also does this show links in the metafields?
Did you try using HTML code?
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
How do i add spaces between paragraphs and pictures. pls help
Are you adding pictures in accordion?
when i type in css, there is no ‘theme.css” option. Which other option do I chose?
You can add code to any CSS file just search “css”
hey i cannot find product-template.liquid file, what do i do?
Hi there! This video is awesome. However, it doesn’t work for me when my css file doesn’t have them file…
When your CSS file does not have what? Please clarify your questions
I’m using the Flex-Nourish Theme from Sandbox and when I got to step 2 I’m unable to locate the theme.css.
You can add code to any CSS file it does not have to be theme.css
Hello, is it possible to do it without metafields? I just have one title and one description for each product, and to do this in all of my 400 products will be a nightmare.
There it is a way to do it for all the product descriptions with code?
Thanks a lot for your help!
Super easy, just remove meta field code and add Static Text with in HTML code
Hi. Good content as always. Your content has already saved me 3 times. Consider me a fan.
I have followed every single instruction here and made a few troubleshooting to make it work perfectly in my client’s theme. Just one more issue I’m having to wrap up this task, though.
The issue is that I have clickable links or even form inside an accordion panel and the panel closes every time I click something inside. How can I keep the accordion panel open even after clicking links inside it and that it should only close when the accordion thumb is clicked?
I hope you can help me with this. Thanks
Please share the store URL and a screen recording of the issue to [email protected]