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
Add Code in CSS File – Second Step
Add the following code in the CSS file of your Shopify Theme
Add Code in JS File – Third Step
Add the following code in JS file of your Shopify Theme
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
Result:
The result should show accordions similar to the following screenshot:
2 thoughts on “Shopify – How To Create Collapsible Accordion for Product Description”
Does this work in Shopify 2.0?
Yes it does.