Shopify – How To Create Collapsible Accordion for Product Description


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:

shopify meta for product description accordion

Create Meta Fields as per the screenshot below:

meta field definitions for product description accordion

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:

product description accordion - shopify

 

5/5 - (10 votes)

About

2 thoughts on “Shopify – How To Create Collapsible Accordion for Product Description”

Leave a Comment

Your email address will not be published.