Solved

Can I add an FAQ accordion section to my Shopify coaching page?

jessjessanders
Excursionist
27 0 8

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

Accepted Solution (1)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 26 (26)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jessjessanders
Excursionist
27 0 8

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

KetanKumar
Shopify Partner
36839 3635 11972

@jessjessanders 

it's my pleasure to help us

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Phoebe19
Visitor
2 0 1

Hi,

 

How to I add the JS section on the theme?

KetanKumar
Shopify Partner
36839 3635 11972

@Phoebe19 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Phoebe19
Visitor
2 0 1

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

KetanKumar
Shopify Partner
36839 3635 11972

@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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Dihan
Visitor
2 0 1

@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?

KetanKumar
Shopify Partner
36839 3635 11972

@Dihan 

yes, current 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sonika2502
Shopify Partner
10 0 6

where do you place the html js and css code

KetanKumar
Shopify Partner
36839 3635 11972

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sonika2502
Shopify Partner
10 0 6

and js file

 

KetanKumar
Shopify Partner
36839 3635 11972

@sonika2502 

your theme jf file bottom of the page

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
orange1989
Shopify Partner
62 0 7

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

KetanKumar
Shopify Partner
36839 3635 11972

@orange1989 

can you please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tara_Snow
Shopify Partner
11 0 0

I copied your code and placed it on my page but it is still now showing correctly (how it shows on your site when I edit it). https://taralynnsboutique.com/pages/moissanite-vs-diamond

jaswant55
Shopify Partner
2 0 1

hello sir how i want to add content dynamically on my shopify hydrogen app. what process should i followed. i want to add the content dynamically on my about us page how can i do. i dont have any idea

KetanKumar
Shopify Partner
36839 3635 11972

@jaswant55 

oh sorry for that issue can you please share

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Yougurt
Tourist
5 0 1

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

Mircea_Piturca
Shopify Partner
1547 44 345

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

Finally—Add variant descriptions to your products
KevinM1
Tourist
10 0 2

Thank you so much!, The FAQ is Awesome!!!!!. 

KetanKumar
Shopify Partner
36839 3635 11972

@KevinM1 

Wow Thant would be great 

thanks for update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cid_gk
Excursionist
34 1 9

Hi there, this is awesome! How can I make the questions/headings automatically lowercase? 

soulchild37
Shopify Partner
163 9 46

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!


Spent too much support time dealing with order cancellation request from customer? Wouldn't it be good if customer can cancel order on their own without bugging your support? Try out Cancellable app! https://apps.shopify.com/cancellable . I also write articles about store customization that can improve your customer shopping experience here : Yagi Software Blog
Marloes_MC
Tourist
5 0 2

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

KetanKumar
Shopify Partner
36839 3635 11972

@Marloes_MC 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing