Filters not visible in mobile version of dawn theme (v11). Only visible on Desktop.

Technical Q&A
, ,

Topic summary

Mobile product filters in Shopify’s Dawn theme were invisible on phones despite working on desktop. The issue affected v11 (with Search & Discovery) and later v15.1.0.

Initial fix (v11):

  • Add CSS in Online Store > Themes > Edit code > base.css:
    .mobile-facets__open { color: inherit !important; }
  • This targets the mobile filter toggle (.mobile-facets__open) so it renders visibly. OP confirmed it resolved the problem.

Follow-up (v15.1.0) where the above made the text appear green:

  • Add Custom CSS in Online Store > Themes > Customize > Theme settings:
    @media (max-width: 749px) {
    .mobile-facets__open { color: #414e28 !important; }
    .menu-opening .mobile-facets__inner { background: #fff !important; }
    }
  • This sets a specific text color for the mobile filter toggle and ensures the filter panel background is white. User confirmed success.

Notes:

  • Screenshots were shared but the core solution is the CSS above.
  • No further issues reported; thread resolved with CSS-based fixes for mobile filter visibility in Dawn.
Summarized with AI on December 18. AI used: gpt-5.
1

Hi,

The filters are only visible in the desktop version. On the mobile version, I have to hover over an invisible space and click to get the filters. How can I ensure filters are visible in mobile too?

I use the search & discovery app.

Thanks!

2

Hi @aakashsaha

Please drop your store link here to check

3

www.asmah.co

This is only happening in the mobile version. Thanks

4

Please add this code at the bottom of your your base.css file in Online store > Themes > Edit code to solve the issue

.mobile-facets__open {
color: inherit !important;
}

Screenshot_1.png
Screenshot_1.png389×556 130 KB

1 Like
5

Thank you! Its working now.

1 Like
6

Welcome, @aakashsaha

7

Filters not visible in mobile version of dawn theme (15.1.0). Only visible on Desktop.
Pls guide

I added this code.. but it changed the colour to opacity green

8

Hi @pankhhari

Could you share your store link?

9

www.pankhhari.com

10

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

@media (max-width: 749px) {
.mobile-facets__open {
color: #414e28 !important;
}
.menu-opening .mobile-facets__inner {
background: #fff !important;
}
}

Screenshot 2024-10-02 at 13.37.39.png
Screenshot 2024-10-02 at 13.37.39.png990×978 115 KB

Screenshot 2024-10-02 at 13.37.45.png
Screenshot 2024-10-02 at 13.37.45.png1024×932 46.3 KB

11

You have no idea how thankful I’m to you for this.
Thank you again.

1 Like
12

Happy I could help!