Need help changing background color on FAQ accordian boxes

Store Design
, , ,

Topic summary

A user needed to change the background color of FAQ accordion boxes to match their site’s header blue (#23BFD0) on a Shopify store using the Fresh theme. They had successfully changed text to white but couldn’t modify the background color.

Solutions provided:

  • Multiple CSS code snippets were offered targeting .accordion--faq-wrapper .accordion-container .accordion-content
  • Methods included adding code to Custom CSS via Theme settings or directly to the base.css file
  • One solution used var(--header-background) to automatically match the header color

Resolution:
The issue was successfully resolved. The user confirmed one of the CSS solutions worked, though they didn’t specify which approach they used. A screenshot was shared demonstrating the desired outcome with the accordion boxes displaying the correct blue background color.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi, I am trying to change the color of the background on our faq accordian boxes to match our current blue (as shown in website header): 23BFD0. I’ve been able to change the text color to white, but haven’t figured out how to change the blue. Please see screenshot.

Current theme is Fresh

website: Tommy's Cookie Co. FAQ – Tommys Cookie Co.

shopify.jpg
shopify.jpg2014×1358 162 KB

3 Likes
2

Thanks for your help. I tried it but it didn’t change the color. I went into the inspect section to see if I could find out the class but I haven’t been able to figure it out.

3

Hey Steph!

Try this bit of CSS:

main .accordion--faq-wrapper .accordion-container .accordion-content summary,
main .accordion--faq-wrapper .accordion-container .accordion-content .Faq_Content {
	background: #23bfd0;
}

Go to Shopify Admin > Online Store > Themes > Customize > Theme settings. Add the CSS in the Custom CSS section and click Save.

Hopefully that works.

Cheers,

Simon

4

Please add this code to Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings.

accordion--faq-wrapper .accordion-container .accordion-content {
    background-color: #23BFD0 !important;
}
5

Hi @stephwiley ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.accordion--faq-wrapper .accordion-container .accordion-content {
    background-color: var(--header-background) !important;
}

result:

Screenshot.png
Screenshot.png1734×938 80 KB

6

thank you so much! it worked - really appreciate the help.

7

Hi @stephwiley ,

You’re welcome and happy to help :blush: