Dawn Theme - Make Collection Filter & Sort Sticky

[Asiela]

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.

[BrewBrains]

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.

1. Go to Online Store -> Theme -> Edit code.
   2. Open your theme.liquid file
2. Paste the below code before </body> on theme.liquid
3.  

<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.

[Anshul_arora · 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.

[Asiela]

Hi @Anshul_arora . This worked perfectly, thanks for taking the time to share this.