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.
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