How to change the color of the background of an FAQ question section when hover with the mouse?

Store Design
, ,

Topic summary

A user seeks to make the hover effect on their FAQ accordion section more prominent by darkening the background color or adding a visual indicator (like a black circle on the arrow), referencing another website as an example.

Solution Provided:

  • Add CSS code .faq-question:hover { background-color: var(--colorFooter); } to customize the hover background color
  • This code can be placed in the section’s “Custom CSS” setting

Implementation Options:

  • For single product template: Add code to section’s Custom CSS
  • For multiple product templates: Add to Theme Settings => Custom CSS (may require !important flag for proper priority)

The discussion concludes with the original poster satisfied and mentioning another related customization task in a separate thread.

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

How to change the color of the background of an FAQ question section when hover with the mouse?
I already have this effect but is too light. I want to make more noticeble by making it more dark Or to add a very black circle on the arrow when hover with the mouse. Like this website did: High Waist Denim Balloon Jeans

This is my website: https://a68618-6a.myshopify.com/collections/clothing-accessories/products/cignella-crane™-embr

Screenshot (595)
Screenshot (595)1920×671 43.8 KB

oidered-shoes

And the liquid of the FAQ section is named: faq-accordation.liquid

2

Try this code:

.faq-question:hover {
  background-color: var(--colorFooter);
}

This will use the same color as your footer. Code can be added to the “Custom CSS” setting of this section.

1 Like
3

Hi @tim_1
This works, but I wonder can we added in the section liquid so it works for every product to which I add this FAQ section? On this way is it working only for this product or for every product which I add with this template?

4

If you have many product page templates, then yes, it will only work for one template and you need to repeat this for each of them

But in this case you may rather add the code to the Theme Settings=> Custom CSS.
(you may need to use !important in this case, as using Section setting “Custom CSS” raises priority of this rule, while Theme setting does not)

1 Like
5

Thank you! I have one more special task. Would you like me to share it please? I actually opened a topic about it, maybe you can check if you can manage it..?