How to change the colour of filter and sort menus / text on search results page

Store Design
, , ,

Topic summary

A user successfully changed their search results page background to black using custom CSS in theme.liquid, but encountered an issue with invisible text (black text on black background) in the filter and sort menus.

Problem: The filter and sort menu text remained black after changing the background to black, making it unreadable.

Attempted Solutions:

  • Another user offered help but misunderstood the issue, providing CSS to change the background color of the facets container to white instead of addressing the text color.
  • Despite clarification, no working solution for changing the text color to white was provided.

Resolution: The original poster worked around the issue by choosing a different, complementary background color instead of black, ensuring the black text and dropdown menus remained visible and functional.

Status: The thread remains unresolved for the original black-background approach. A second user later asked if a solution was found, confirming this is a common issue.

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

Hi team

Trying to adjust the colours of my search results page as there doesn’t appear to be a way to select a colour theme for this section (??)

Have looked everywhere, found what i needed to change background colour but cannot work out how to change the text colour

i used this in theme.liquid to change the background colour to black;

 {% if template == 'search' %}
<style>
main#MainContent {
background: #000000;
}
</style>
{% endif %}

How do i then change all my text for the filter and sort options to white? can i add something more to this?

screenshots to help clarify;

before

BEFORE
BEFORE2620×948 213 KB

after!

Screenshot 2025-02-02 120432 after.png
Screenshot 2025-02-02 120432 after.png2582×974 191 KB

Thanks in advance

2 Likes
2

Hello @TooSpicyNZ
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

3

www.toospicy.co.nz

1 Like
4

Hello @TooSpicyNZ

I checked the site, and a black background has already been added across all pages. So, the search page is also showing a black background. Do you want the background color of the search page to be white?

Home page

devcoders_0-1738480553292.png
devcoders_0-1738480553292.png1322×681 133 KB

Search page

devcoders_1-1738480580312.png
devcoders_1-1738480580312.png1305×652 126 KB

5

Hi, no I want the background black which I managed to do myself. Now I need help making the sort and filters text white please. Thanks

1 Like
6

Hello @TooSpicyNZ

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

.template-search .facets-container {
background: white;
padding: 10px 10px 0;
}

devcoders_0-1738486691146.png
devcoders_0-1738486691146.png1351×520 26.9 KB

7

Hey, I appreciate you trying to help me but the background colour is not the issue. As the title of the thread says I want to make the text white

(as it is currently invisible, black on black!) thanks

8

Did you find an answer to this? I have tried editing tons of code with no success.

9

Hi, no, no solution as such.

In the end I chose a different but complimentary background colour instead of the black. So at least that way the black text and all the drop downs etc are visible and useable.

Cheers