Collection filter drop down has the same color text and background

Technical Q&A
, ,

Topic summary

Issue: The collection filter/sort dropdown inherits site-wide colors, making white text on a dark background invisible in the dropdown on a Shopify Dawn 10.0 theme.

Context: The dropdown uses Shopify’s facet filters (filter/sort UI). Key elements include the CSS class facet-filters__sort and the select element with id SortBy.

Solutions shared:

  • Edit component-facets.css: set a non-transparent background for .facet-filters__sort (changing from transparent to a chosen color). This resolved the original report.
  • Alternative CSS in base.css/style.css/theme.css: select#SortBy { background: #2b2d42 !important; } to force a visible dropdown background. Screenshots demonstrate successful results.

Follow-up case: A second store sought a white background with black text; prior solutions didn’t work. A suggested snippet targeted div#Facet-1-template–…__product-grid * { color: #fff; }, which forces white text and may not align with the request for black text. Outcome for this case is unclear.

Notes:

  • Images and code snippets are central to understanding the fixes.
  • Resolution: First case solved via CSS background override; second case appears ongoing or mismatched to requirements.
Summarized with AI on December 19. AI used: gpt-5.
6

Thanks for the info, try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
select#SortBy {
    background: #2b2d42 !important;
}