Add Scroll Bar in Vertical Filter View

Store Design
, , , , ,

Topic summary

Issue Identified:
A Shopify store’s product collection page displays correctly with a scroll bar in horizontal filter view (150 products), but in vertical filter view, the scroll bar disappears and products expand indefinitely down the page.

Root Cause:
The vertical filter container lacks fixed height and overflow properties, preventing proper scrolling behavior.

Solution Provided:
Add CSS to constrain the filter wrapper with max-height: 100vh and overflow-y: auto. The implementation targets .facets-wrapper and includes:

  • Reserved space for the scrollbar (padding-right: 90px)
  • scrollbar-gutter: stable for future-proofing
  • Mobile-specific adjustments with reduced padding and touch scrolling

Status: Resolved. The user successfully implemented the CSS fix after receiving guidance on where to add custom CSS in their Shopify theme settings.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

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.

Alliance_0-1744375813076.png
Alliance_0-1744375813076.png400×225 68.8 KB

Alliance_1-1744375812769.png
Alliance_1-1744375812769.png400×225 45.7 KB

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/

2

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.

3

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;
}
}