scroll bar to the filter

Shopify Discussion
1

Hi everyone! can we add a scrollbar to the verticle filter added using search and discovery app? i am using shopify dawn theme. here is the link to the preview of my store.

https://nkuni6bgbt6bima4-67593830638.shopifypreview.com

looking forward to the answer and if possible solution aswell.

TIA

2

Yes, of course.

For example, this code can be added to the Theme Settings=> Custom CSS, or to a stylesheet in your theme

#FacetsWrapperDesktop {
  max-height: calc( 100vh - var(--header-height) );
  overflow-y: auto;
  padding-right: 10px;
}

The code limits the height of the filter so that it’s never taller than page height:

Screenshot 2025-03-31 at 5.46.33 PM.png
Screenshot 2025-03-31 at 5.46.33 PM.png767Ă—1245 157 KB

.
Screenshot 2025-03-31 at 5.46.41 PM.png
Screenshot 2025-03-31 at 5.46.41 PM.png767Ă—1245 168 KB

3

You can add a scrollbar to the vertical filter in the Search & Discovery app by modifying the CSS of the filter container in your Shopify Dawn theme. Try adding the following CSS to your theme’s base.css or component-facets.css file:

/* Add scrollbar to filter container */
.your-filter-container-selector {
    max-height: 400px; /* Adjust height as needed */
    overflow-y: auto; /* Enables vertical scrollbar */
    scrollbar-width: thin; /* For Firefox */
}

/* For Webkit browsers like Chrome, Safari */
.your-filter-container-selector::-webkit-scrollbar {
    width: 6px;
}

.your-filter-container-selector::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

.your-filter-container-selector::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

Steps to Apply:
Find the filter container’s class using Inspect Element (DevTools). Replace .your-filter-container-selector with the actual class name.

Add the CSS to your theme’s base.css or component-facets.css file.

Save and preview your store.

4

Hello there @momsabhiruchi You can try out the following steps and let me know the results

Log in to your website’s backend or content management system.

Locate the CSS file that controls the styles for your side filter. This will depend on the platform you’re using and the specific theme or template you’re using.

Add the following CSS code to the file:

.your-side-filter {
  max-height: 200px; /* adjust this value to your liking */
  overflow-y: auto;
}

Copy

5

Thank you so much for quick response.it worked very well. thanks once again

6

thank you for quick response.

7

thank you for quick reply

1 Like