The Filter Menu theme extension includes several options for setting the layout for the filters on your theme. The available options are:

You can find the layout options after you've added the Filter Menu Theme Extension to your theme in the the theme editor. Click on the "Filter Menu" section under "Apps" to view the settings.

In the next section that opens up, you can select a "Display Mode":

The horizontal layout is the default layout you'll see when you first enable the Filter Menu theme extension in your theme. It works best with a few filter groups and all filters set to display as drop-downs.

"Vertical or Existing Sidebar" layout will show the filter menu vertically, and has a few extra options which allow you to select where the vertical filters should be placed on the page.

The "Selector for existing sidebar" setting is where you can input the CSS selectors for the elements where you want the Filter Menu to be shown. The default value for this setting applies to the Dawn theme, but it can be changed to suit any theme. This setting will accept a list of selectors, and adds the Filter Menu to all elements in the list.

You will need to make sure that your theme sidebar is enabled, if the theme includes one, it should be a setting under "Product Grid" or "Collection" in your theme editor.

This does require some knowledge on how to inspect your theme code to choose the correct selectors. If you have any trouble with this part, please reach out to our support team. We'll be happy to help!

For more details on how to find the selectors you need, we have this guide:

You can also leave the selectors blank to set the Filters to display vertically, and enable other settings like the drawer - you can find more details on how to do that further down this guide.

The "Smart Sidebar" setting will automatically create a sidebar for you, it works best when the theme sidebar is disabled.

You will need to make sure the "Apps" section containing the Filter Menu is placed above the Product Grid for the Smart Sidebar to work properly. It should look something like this in your theme editor sidebar:

Note your theme might not use "Product Grid", it could be "Collection" or something similar, basically you want the filters to be placed above the section that contains all of your products. If you have any problems, please reach out to our support team.

If you notice the Filter Menu is pushed up against the left side of the page, you might need to add an additional class to fix it.

The "Additional classes for the Filter Menu container" setting allows you to add any CSS classes that you need for the container the Filter Menu and Product Grid are inside of. These are only applied when the Smart Sidebar display option is selected

These classes will come from your theme styling, a couple of common classes used on many themes are:

You can check out the following guide for more details on how to find your container classes, or reach out to our support team who are always happy to help.

The "Custom CSS" setting won't apply any layout styles from the app, you will still have most styling options available but it will simply display a vertical list of the filters. Allowing you to fully customise the layout as needed. This option is intended for people familiar with writing CSS.

If you want to set the app to display as a drawer on both desktop and mobile views - first select the "Vertical/Existing Sidebar" display mode, and make sure the "Selectors for existing sidebar" setting is blank. Then in your theme editor click on "App Embeds" in the top left:

Then find the "Drawer" section, and toggle it on:

You can click the small arrow on the left to open the drawer section settings, here you can set the other design aspects for the drawer and drawer button, such as background colors and padding.

You can also set the drawer to only show on mobile, if you only want the drawer on mobile you can set the "Display mode" to Smart Sidebar, Horizontal, or Vertical/Existing sidebar, or Custom CSS. The Drawer on mobile will work with any of these display modes.