Sticky filters on product page - Colorblock theme

Store Design
1

Hi!

Is there any way to make the filters on the products page in the Colorblock theme sticky?

Right now I have them left of the products and I’m using the “Search & Discovery” App

Thanks!

2

Share your store url. Css can handle your requirement.

3

Hello @ac-ado ,

Edit theme.liquid search for

once found just before to it add this code

Regards
Guleria

1 Like
4

Thanks!

https://ac-ado.com/

5

Thanks for your reply!

It doesn’t give any results for , I’m afraid…

6

Sorry, gave up too soon :slightly_smiling_face:

It worked, but the first filter slides under the header on scroll..

7

Update the code
1 Like
8

You do not need this Javascript stuff.

Simply add this code to the “product grid” sections “Custom CSS” setting instead:

@media (min-width:750px) {
  .facets-container {
    position: sticky;
    top: var(--header-height,0);
  }
}

Avoid editing theme code as code edits will make future theme updates difficult.

3 Likes
9

Perfect, thank you, Tim!

Worked like a charm :slightly_smiling_face:

10

Hi there –

I just wanted to say thanks for this. You helped me solving the same problem to get the Filter/Sort bar be sticky on Collections Template page for Horizon Themes. In this case, you have to modify the facets-block-wrapper class. It works perfectly in the editor. Thanks again PS: I’m no good with the other styling attributes (z-index etc…) but here’s my code anyways…

.facets-block-wrapper {
position: sticky;
top: var(–header-height, 0);
z-index: +1;
}