Add Scroll Bar in Vertical Filter View

[Alliance]

Dear friends,

I am experiencing an issue with the filter view on my product page.

• In horizontal filter view, my 150 products display correctly with a scroll bar.

• However, when switching to vertical filter view, the scroll bar disappears, and the product list expands indefinitely, taking over the entire page.

Could you please help implement a scroll bar in the vertical filter view to maintain a consistent user experience?

Thank you for your assistance.

Best regards,

URL: https://ba0ven-x1.myshopify.com/

[Dotsquares · Accepted solution]

Hi @Alliance 

Thanks for reaching out!

It sounds like the vertical filter view on your product page isn't respecting the scrollable container, which is why the product list expands and takes over the entire page.

This is likely a CSS issue. When switching to vertical filter view, the container that holds your product list may not have a fixed height or overflow setting. To fix this, you can try adding the following CSS:

.collection-products {
  max-height: 100vh;
  overflow-y: auto;
}

You may need to adjust the class name (.collection-products) based on your theme’s structure. If you’re using a theme like Empire or Impact, this class might be different.

To add this:

Go to Online Store > Themes > Customize.

Click Theme settings > Custom CSS (or go into the code editor if needed).

Paste the CSS code and save.

[Alliance]

Thank you for the lead and follow up. Sorted out. 

.facets-wrapper {
max-height: 100vh;
overflow-y: auto;
padding-right: 90px; /* Reserve scrollbar space */
box-sizing: border-box;
scrollbar-gutter: stable; /* Future-proof */
}

/* Mobile tweaks */
@media (max-width: 767px) {
.facets-wrapper {
padding-right: 12px;
-webkit-overflow-scrolling: touch;
}
}