A Spark theme user reports that mobile filtering and sorting options are hidden behind floating elements (currency converter and Shopify inbox). They’re seeking a solution to make the mobile layout match the desktop version.
Proposed Solutions:
Two community members offered CSS-based fixes:
Dan-From-Ryviu suggests adding CSS code to hide the mobile filter trigger by setting display: none !important and position: relative !important on .mobile-filters__trigger in the theme.css file.
PageFly-Richard recommends inserting custom code in the theme.liquid file before the closing </body> tag.
Both responses include code snippets and reference screenshots (though the image links appear corrupted in the thread). The issue remains unresolved as the original poster hasn’t confirmed whether either solution worked.
Hello!
I’m using the Spark theme but unfortunately, on mobile, the filtering and sorting aren’t visible because I use a floating currency converter and the floating Shopify inbox feature.
I’m wondering if anyone knows how to change the mobile filtering and sorting to look the same as on desktop?
https://noraofficial.com/collections/new-arrivals
Thanks
You can do that by going to store admin > Sale channels > Online store > Themes > Edit code > Assets > open theme.css or theme.css.liquid file, add this code at the bottom
.mobile-filters { position: relative !important; }
.mobile-filters__trigger { display: none !important; }
This is result
Hi @Gulmain , This is Richard from PageFly - Landing page builder.
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag
I hope it would help you Best regards,
Richard | PageFly