How to change default mobile filter layout to vertical instead of drawer

[Batch1]

Hello Everyone,
I'm using the shopify search and discovery app. I'm trying to figure out how to change the mobile filter layout from drawer to vertical. Thank you very much!

[Dotsquares]

hello @Batch1 

Shopify's Search & Discovery app does not have in-built settings to toggle the mobile filter layout from a drawer to a vertical layout. Nevertheless, you can do so by modifying your theme's filter code.

Give these steps a try:

Locate the Filter Code

• Go to Online Store > Themes > Click Edit Code on your active theme.
• Find the file that controls filtering, usually in sections/main-collection-filters.liquid or snippets/filter.liquid.
  Modify the Layout

Modify the Layout

• Look for the filter-type="drawer" setting and change it to filter-type="vertical" (if available).
• If not, you’ll need to customize the CSS and Liquid code to display filters as a vertical sidebar instead of a drawer.

Adjust CSS

• Add CSS in theme.css or base.css to make filters appear as a sidebar:

.filter-container {
    position: static !important;
    display: block !important;
    width: 100%;
}

Check Theme Documentation

• Some themes allow changing filter layouts in Theme Settings > Collection & Search.

[Batch1]

Thanks for the reply,
I haven't been able to find the section that controls the filtering. When pasting the above code into the base.css file, the filter still appeared the same on mobile. I am still unsure of a fix/solution