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

Store Design
1

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!

Batch1_0-1742187566879.png
Batch1_0-1742187566879.png268×227 10.2 KB

2

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.
3

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