All things Shopify and commerce
Hi Community
I've not been able to find a solution to this in the forums, so not sure if it is even possible.
I have sort and filter enabled on my collection pages on Dawn Theme. I currently have a sticky header enabled across all pages. I was looking to also make the "sort and filter" section sticky underneath the header on scroll.
This is a preference for mobile, but would be happy if this could be sticky on both mobile and desktop.
This theme is currently in preview (not my live site), so here is a temporary preview URL:
https://cp04z7bbr9rzqsf6-78302052681.shopifypreview.com
I've also shared a screenshot of what I am trying to achieve.
Solved! Go to the solution
This is an accepted solution.
Hello @Asiela ,
Please add the below mentioned code in your theme.liquid file before </body> tag and save
<style>
aside#main-collection-filters {
position: sticky;
top: 45px;
z-index: 2;
background: white;
}
</style>
The code may help you to make the collection filter sticky.
Output =>
Please share if you have any query.
Thank you.
Hi @Asiela ,
You can add code by following these steps to make the filter sticky below the navbar as in the screenshot for mobile only.
<style>
@media only screen and (max-width: 600px) {
div#shopify-section-template--20499216433481__product-grid #main-collection-filters {
position: sticky;
top: 48px; /* Adjust this value based on your header's height */
z-index: 1000; /* Adjust the z-index as needed */
background-color: #fff; /* Set background color if necessary */
}
}
</style>
If you need any further assistance or have any queries, feel free to contact me.
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution and click like.
Was I helpful?
Sandesh Paudyal |
| Shopify Partner
Need help with your store?
[email protected]For quick response - Message Me : +9779851353732
This is an accepted solution.
Hello @Asiela ,
Please add the below mentioned code in your theme.liquid file before </body> tag and save
<style>
aside#main-collection-filters {
position: sticky;
top: 45px;
z-index: 2;
background: white;
}
</style>
The code may help you to make the collection filter sticky.
Output =>
Please share if you have any query.
Thank you.
Hi @Anshul_arora . This worked perfectly, thanks for taking the time to share this.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024