How to add an FAQ accordion section to an online coaching page?

Hi everyone,

I am hoping to add an FAQ section to my online coaching page.

I like the format where all the questions are layered on top of each other, with a cross to click the answer open.

If there is appropriate HTML and CSS code for this, I’d love to add it to my website.

I’d appreciate your feedback and assistance,

Website: https://sharnie- cocks.myshopify.com/ (no spaces)
Password: reiffa

1 Like

@jessjessanders

Thanks for post

are you able to code can you please try this or if not so please sent a personal message i will do this

https://codepen.io/Chris5656/pen/wJbMEd

1 Like

Thank you, this is exactly what I was looking for :slightly_smiling_face:
Much appreciated.

1 Like

@jessjessanders

it’s my pleasure to help us

if you need more help please contact here email: bamaniyaketan.sky@gmail.com

Hi Jesse,

I’ve created one you ca use in Shopify’s native language so it works from the customiser (where you customise sections for your frontpage). Super simple.

You dont even have to tinker with the code yourself: https://www.rainbowmake.com/free-faq-template-for-shopify

I hope it helps you :-)!

/Daniel

I have an FAQ section you can freely download. Please see: https://sections.design/blogs/shopify/faq-rich-snippets-section

Code is available at: https://github.com/mirceapiturca/Sections/tree/master/FAQ

Hope it helps

2 Likes

Hi,

How to I add the JS section on the theme?

1 Like

@Phoebe19

sorry for any issue please add your custom js on theme.js file

How do I add this? Do you have the step by step information on how to do this?

@Phoebe19

1 - create your custom page template

2 - after new page template add new section doe faqs

3 - thene copy and past section on new section fiels

4 add your css file to theme csss

5 your js file add theme js file

@KetanKumar

Just to keep code clean, if you were to add them as accordion.js and accordion.css would the asset folder automatically compile like rails?

1 Like

Heya,

I have made a simple FAQ accordion generator here : https://accordion.yagisoftware.com .

You can type in the FAQ sections title and content there, then generate the HTML code, which you can paste into your product / pages / blog post editor in “show HTML” mode, and thats it! No need to tinker with theme code.

Hope this helps!

2 Likes

@Dihan

yes, current

1 Like

@soulchild37 Thank you very much for this, works perfectly!

1 Like

@Marloes_MC

its my pleasure to help us

where do you place the html js and css code

1 Like

@sonika2502 you have pute this your custom page to html code and css code on your css file depend on your theme

and js file

@sonika2502

your theme jf file bottom of the page

This is very neat. @KetanKumar

I just don’t know how to add this on theme builder. Where do I start? I use parallax theme