How to change overlay color behind Filter and sort on mobile?

Technical Q&A
, ,

Topic summary

  • Main issue: On a Shopify theme, the background overlay behind the Filter/Sort panel displays as pink on mobile, even though the overlay color was successfully changed on desktop. The author cannot override the mobile overlay color and shared a screenshot illustrating the pink overlay.

  • Clarification requested: A responder could not observe the background color issue and asked for more details—specifically which collection page is affected—and requested the store URL to investigate. An image was also included by the responder.

  • Status: No solution yet; the thread is awaiting additional information (page context and URL) to diagnose the CSS/mobile-specific styling.

  • Notes: Images are central to understanding the reported visual issue. The discussion is focused on CSS/design behavior differences between desktop and mobile within a Shopify theme.

Summarized with AI on December 25. AI used: gpt-5.
1

I was able to change the overlay color that appears behind the filters on desktop. However on mobile this overlay appears pink and I can’t seem to change it no matter what I try. This is what it looks like. Any advice is most appreciated.

Screenshot 2025-12-24 at 11.49.26 PM
Screenshot 2025-12-24 at 11.49.26 PM880×1808 55.1 KB

1 Like
2

Hey @Mugbarista!

I can’t see the issue with the background color that you’re facing. Could you clarify more on this collection page this issue is. Or if you can share the url then it help us a lot.

image
image380×852 17.3 KB

3

Hi, thanks for the reply. It’s the pink towards the left. On desktop I have that appearing as a semi transparent gray using this code:

.mobile-facets {

background: rgba(128, 128, 128, 0.5); !important;

}

This happens on mobile on any collection page with filter and sort. My site’s URL is mugbarista.com

Thank you!

4

Hey @Mugbarista

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.mobile-facets {
    background: rgba(128, 128, 128, 0.5) !important;
}
</style>

RESULT:

image
image349×751 13.8 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
5

Please add this code to Custom CSS in theme settings to change that color.

@media (max-width: 749px) {
  .mobile-facets {
    background-color: rgb(128 128 128 / 50%) !important;
  }
}
6

Thank you, however that did not result in any change, it’s still pink.

8

This solution worked perfectly. Thank you Moeed and Dan!

1 Like
9

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like
10

I updated the code, please check.