Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I know that there's been discussion on this topic before. But the issue persists even after trying the solutions that I have seen from the other posts. Here is a screenshot of what I mean.
The text for my website is white. The background is dark. That's what I want. But because this filter just uses the same color value as the rest of my website, it blends in. There's no way to get around this without also changing the text for the rest of my website. What is the solution? Not that it should matter, but it is using the Dawn theme 10.0.
Solved! Go to the solution
This is an accepted solution.
Here is the solution.
component-facets.css > facet-filters__sort
Just change the background color value (it originally was set to transparent) to whatever you want.
Problem Solved.
This is an accepted solution.
Thanks for the info, try this one.
select#SortBy {
background: #2b2d42 !important;
}
Hi @DakotaJ138
Would you mind to share your store URL website? with password if its protected. Thanks!
Sure thing.
https://nonamenecessities.com/collections/womens-sales
Here is an example collection.
This is an accepted solution.
Thanks for the info, try this one.
select#SortBy {
background: #2b2d42 !important;
}
I know it is related to facet-filters, but I couldn't get it to work when I edited the code. Maybe I did something incorrectly.
<select name="sort_by" class="facet-filters__sort select__select caption-large" id="SortBy" aria-describedby="a11y-refresh-page-message"><option value="manual">
Featured
This is an accepted solution.
Here is the solution.
component-facets.css > facet-filters__sort
Just change the background color value (it originally was set to transparent) to whatever you want.
Problem Solved.
Can you help me with this? I tried the solutions provided, but they did not work.
www.thespiralpath.love/collections/frontpage
I'm aiming for a white background with black text. Thanks so much!
check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
div#Facet-1-template--17443031974133__product-grid * {
color: #fff;
}
And Save.
result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025