Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
Some merchants and partners are experiencing problems when logging into their Shopify accounts. We will continue to provide updates to you here.

Sort Filter is Transparent

kris25
New Member
3 0 0

Hello, I have a shopify store using the RIDE theme. On windows computers the dropdown for sorting is white with white text. The theme is made by shopify so I am confused why it would show up like this. 

 

unknown.png

Replies 5 (5)
MarinaPetrovic
Shopify Partner
498 112 158

Hi @kris25 , please share your url so I can take a look, since sorting is not transparent on the original ride theme. 
Screenshot 2022-09-23 at 08.35.47.png

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
kris25
New Member
3 0 0
The url is shop.johnniebrocks.com <> - thanks!
MarinaPetrovic
Shopify Partner
498 112 158

Hi @kris25 , I've just checked your store on safari and chrome - it's not transparent. Which browser are you using?
Screenshot 2022-09-23 at 17.14.51.png

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
kris25
New Member
3 0 0
On Macs it shows up properly because Mac has their own styles for sorting like that. On a windows computer it shows up white on white like my screenshot.
MarinaPetrovic
Shopify Partner
498 112 158

I see. Go to edit code > assets > component-facets.css and find this element:

.facet-filters__sort {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    font-size: 1.4rem;
    height: auto;
    line-height: calc(1 + .5 / var(--font-body-scale));
    margin: 0;
    padding-left: 0;
    padding-right: 1.75rem;
}

 

Replace it with:

.facet-filters__sort {
    border: 0;
    border-radius: 0;
    font-size: 1.4rem;
    height: auto;
    line-height: calc(1 + .5 / var(--font-body-scale));
    margin: 0;
    padding-left: 0;
    padding-right: 1.75rem;
}
M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution