Dawn template: Overlay colour when I click on "filter"

Store Design
,

Topic summary

Main issue: In the Dawn theme, opening the “Filter” drawer on the Single Origin collection showed a pink page overlay; the requester wanted a darker overlay.

Proposed solutions:

  • Edit CSS in component-facets.css by targeting the mobile filter overlay (e.g., .mobile-facets) and setting background-color: rgba(0,0,0,.5) to darken the backdrop.
  • Alternatively, add custom code in theme.liquid right after the tag to override the overlay color globally.

Outcome: The requester applied the theme.liquid approach and confirmed it worked. The issue is resolved.

Notes:

  • Screenshots were used to illustrate current (pink) vs desired (dark) overlay.
  • Key files/terms: component-facets.css (Dawn’s facets styling), theme.liquid (theme layout where global overrides can be added).
  • URL provided for context: www.doecoffee.com.
Summarized with AI on January 1. AI used: gpt-5.
5

You are very welcome!

1 Like