Sticky filters on product page - Colorblock theme

[ac-ado]

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!

[Shadab_dev]

Share your store url. Css can handle your requirement.

[ac-ado]

Thanks!

https://ac-ado.com/

[tim · Accepted solution]

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.

[ac-ado]

Perfect, thank you, Tim!

Worked like a charm 🙂

[Guleria]

Hello @ac-ado ,

Edit theme.liquid search for </body> 

once found just before to it add this code

<script>
window.addEventListener('scroll', function () {
  const headerbg = document.getElementById("main-collection-filters");
  if (window.scrollY > 40) {
    headerbg.classList.add('hasbg');
  } else {
    headerbg.classList.remove('hasbg');
  }
});
</script>
<style>
.hasbg div#FacetsWrapperDesktop {
    position: fixed;
    top: 0;
}
</style>

Regards
Guleria

[ac-ado]

Thanks for your reply!

It doesn't give any results for </body>, I'm afraid...

[ac-ado]

Sorry, gave up too soon 🙂

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

[Guleria]

Update the code

<script>
window.addEventListener('scroll', function () {
  const headerbg = document.getElementById("main-collection-filters");
  if (window.scrollY > 40) {
    headerbg.classList.add('hasbg');
  } else {
    headerbg.classList.remove('hasbg');
  }
});
</script>
<style>
.hasbg div#FacetsWrapperDesktop {
    position: fixed;
    top: 32%; 
    z-index: 1;
    width: 15%;
}
</style>