How to create a collapsible FAQ section (accordion)

28 Jul 2021

Axel Kee

This post contains instruction on how to use the code generated from the Collapsible Accordion Generator

After inputting the title and contents for the accordions section, click “Get HTML Code”, and click “Copy Code”.

Copy Code

Next, go to the edit product page, or edit pages/blog content page, and click the “< >” button on the top right of the editor to show HTML.


Next, paste in the code you copied earlier to the bottom of the editor :

Paste code

Click “Save” at the top to save your product description / page / blog post content, and now when you view the product, it will show the accordion :


If you want to remove the accordion code in the future, you can click the show HTML button (“< >”) in the product / page / blog post editor, and find the code below and remove them :

<!-- start yagi accordion -->
<!-- end yagi accordion -->

Customize your Shopify store without coding knowledge, and gain happy customers

I will send practical tutorials and guide to improve your store experience, which you can follow without coding experience, about once a week

We respect your privacy, unsubscribe any time