Solved

Dawn Theme - Make Collection Filter & Sort Sticky

Asiela
Excursionist
16 2 1

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.

 

Asiela_1-1711635289871.png

 

 

Accepted Solution (1)

Anshul_arora
Navigator
303 73 52

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

Anshul_arora_0-1711713847282.png

 

Please share if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 3 (3)

BrewBrains
Shopify Partner
98 14 18

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.

 

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Partner


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

Anshul_arora
Navigator
303 73 52

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

Anshul_arora_0-1711713847282.png

 

Please share if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Asiela
Excursionist
16 2 1

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