Facets invisible background

Store Design
,
1

Hi,

My search bar returns results but they have an invisible background (I want to make it white) the same applies for sort and filter options, the black writing on an invisible background is difficult to see and I need it white please.

I have tried multiple solutions such as adding custom code, amending theme colors etc but no success and this is preventing me from launching my store.

Thank you kindly in advance

2 Likes
2

Hi Krazycards,

I understand how frustrating that can be , it’s a common issue, especially with themes where the search, sort, or filter dropdowns inherit transparent backgrounds from global styles.

You can usually fix this by adding a small CSS snippet to your theme:

/* Make search, sort, and filter backgrounds white */
.predictive-search, 
.select__select,
.facets__disclosure,
.facets__display {
  background-color: #fff !important;
  color: #000 !important;
}

To apply it:

  1. Go to Online Store → Themes → Customize

  2. Click Theme Settings → Custom CSS (or Edit code → base.css, depending on your theme)

  3. Paste the snippet above and save

  4. Clear cache or refresh your storefront preview

That should give your search and filter dropdowns a clean white background with visible black text.

If you’ve tried similar edits and it still doesn’t work, it might be a theme-specific CSS conflict. I’ve helped a few store owners resolve similar visibility issues , if you’d like, I can take a quick look and identify the exact element or override causing it.

3

Hi @krazycards thank you for reaching out to the community. I’m happy to assist you with this issue.

Here are a few suggestions you can try:

  1. Review your customization settings to see if there’s an option to modify the color.

  2. Since you’ve implemented custom code, consider using !important in your CSS declarations to ensure they take effect. Alternatively, you can try CSS selector chaining to increase specificity.

  3. If the issue persists, please share a preview link so I can take a closer look and provide a more targeted solution.

Let me know how it goes!

4

Hi @krazycards

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

5

Hey @krazycards

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

6

Hello @krazycards

Kindly provide your store URL please and if it is password protected, please share the password as well.

Thanks!

7

Hey @krazycards,

Could you please share your store URL and password (if applicable) so that I can take a look and provide you the solution code?

Looking forward to hearing back from you.

Best,

Daniel Smith