How do I change the background color of the "sort by" options?

Store Design
, ,

Topic summary

A user encountered a readability issue where the background color of the “sort by” dropdown options matches the text color, making selections invisible.

Proposed Solutions:

Multiple developers suggested adding custom CSS code to the theme.liquid file, just before the closing </body> tag. The recommended approaches include:

  • Targeting .facet-filters__field .select__select and .mobile-facets__sort .select__select classes
  • Using #SortBy option, #SortBy selectors with black background and white text
  • Setting background: black !important; to override existing styles

Current Status:

A new user (ChadXF) reported the same problem on their store (www.kave.co.za) and confirmed that the suggested CSS solutions did not resolve the issue after implementation. The discussion remains open with no confirmed working solution for all cases. Several responders requested store URLs and passwords to provide more specific troubleshooting.

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

The background color of the sort by options is the same as the text color making it unreadable. How do I change it?

Capture.PNG
Capture.PNG1373×861 101 KB

2

Hello @2Hops

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.facet-filters__field .select__selec, .mobile-facets__sort .select__select{ background: #161615 !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Add this otherwise share your store URL and password if any please.
so i can check and provide you possible solution for your question.

3

Hello @2Hops
Please provide URL and password of your store.

4

Hi @2Hops ,

To change the background color of the “Sort by” options, follow these steps:

  1. Go to Online Store > Themes.

  2. Click on Actions next to your current theme and select Edit code.

  3. In the code editor, locate the theme.liquid file. This is typically found under the Layout folder.

  4. Scroll to the bottom of the theme.liquid file, and just above the closing tag, add the following custom CSS code:

Refer screenshot:

Sweans_0-1722574551694.png
Sweans_0-1722574551694.png329×170 2.22 KB

  1. Click Save to apply the changes.

This code sets the background color of the “Sort by” options to black. You can replace black with any color of your choice.

I hope this helps! If not, please provide url of website.

If it does, please like it and mark it as a solution!

Regards,
Sweans

2 Likes
5

Hello @2Hops
I think you need an output like this.

prakashVt_0-1722576239757.png
prakashVt_0-1722576239757.png432×306 7.28 KB

for that please use this css

#SortBy option,  #SortBy {

        background: black; 
color:#fff;
      }
6

Hi all.

I’m currently facing the same issue with my sort by background color. I just started with shopify and tried inputting the above codes.

After saving the changes, the background is still the same.

www.kave.co.za

Would gladly appreciate any help, thanks.