The color theme of my Website (Ride version 1.0.0) seems to apply the color of the text but not the color of the background of the drop down Sort By menu. How do you customize the colors on that menu? Or at least have it match the color scheme?
Topic summary
Main issue: On the Ride theme (v1.0.0), the “Sort By” dropdown applies text color but not its background, leading to a mismatch with the site’s color scheme.
Proposed fix: A staff reply advises editing theme code (Online Store > Actions > Edit Code > Assets > base.css) and adding a CSS rule targeting select[name=“sort_by”] option to set a custom background-color (example uses #111, but any hex can be used). This addresses the dropdown options’ background.
Follow-up request: Another user needs the white backgrounds behind the filter triggers (“Availability,” “Price”) and the “Sort by” control (including the dropdown arrow) to match the page background. Two images are provided to illustrate the white background areas, which are central to understanding the request.
Status: Partial guidance provided for the options list background only. No confirmed solution yet for the filter trigger/label areas or dropdown arrow background, and the thread remains open for further CSS selectors or steps specific to those elements.
1 Like
Hi, @TTMG !
Thanks for reaching out in our Community forums and for sharing your concern, I’d be happy to help.
It sounds like you are looking to customize the color of the background of the drop down Sort By menu on the Ride theme. This can be done by following the steps below:
- Head over to your Shopify Admin, and click on Online Store
- From there, click on the Action button beside the Ride Theme and select Edit Code
- Then, you will browse through the Assets section and click on /base.css
- Finally, you will add this code to the bottom of the file and save.
select[name="sort_by"] option {
background-color:**#111**;
}
Please note, in this example, the color is set to black (#111), but you can replace it with any color that you desire.
Kindly reply back to this thread with any questions or updates and we can continue our conversation further!
14 Likes
I have a question similar to this one. I need to change the background of the dropdown arrows that activate the menu and the filter options. In the images you can see that the words Availability and Price have white backgrounds and I want it to be the same color as the screen background. The same is true for the for the drop down arrow 2 products in the sort by image.
