Hi @DakotaJ138
Would you mind to share your store URL website? with password if its protected. Thanks!
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.