The Filter Menu settings are found in a different location in the Theme App Extension, compared to the Theme installer version of the app. You'll find all the same settings in both versions though. With some new additions in the Theme App Extension.

For general layout settings, see this guide:

Inside the Filter Menu app section you can find some base settings such as the display options, mobile options, and options for hiding/showing certain components in the filters. As well as some more advanced options for how the filters should behave.

You can find even more options for customising the filters in the App Embed settings.

To access all the different settings options to customise your filter menu, simply go to the App Embed section in your theme editor:

Due to limitations in Shopify's Theme App Extension framework the Filter Menu will have minimal styling applied when you first add it to your theme, so a couple of app embed settings need to be turned on in order to apply all of the default styling. These settings are:

Make sure these two are always enabled as they apply most of the default styling required for the filters. If you're also using "small boxes" display in the app, you'll also need to toggle the "Enable Small Boxes" app embed block too.

Here's a quick run through of all the settings available:

This section allows you to edit the colors for the filter group headings, filter links, and clear buttons. You can also change the icon for checkboxes and adjust the size of color swatches in this section. There are also options for background color and padding for the filters. And an option for mobile padding - which you might need if you're using the Existing Sidebar display option.

In this section you can adjust the font family, font size and font weight for the filter group headings, filter links, and default mobile button.

Enable the 'Apply' button to allow customers to select multiple filters without the page reloading. Once they've made their selection they can apply all selected filters in one go.

You can find options for setting the apply button color and shape here too.

With this setting enabled, each time a filter is selected the filters will be reloaded. This is done to make sure that we don't show any links that might lead to an empty collection.

AJAX is a web development technique that allows a webpage to send and receive data from a server in the background, without requiring a full page reload, making websites more responsive and user-friendly. Enabling this setting will allow the filters and product grid to be reloaded, while the rest of the page remains the same.

For this setting to work correctly, you'll need to provide the correct selector - the default is "main" and should work for most themes. The selector should match the container that includes the Filter Menu, the Product Grid, and the Collection title.

There is also an option here to include additional scripts to run after the AJAX completes, this will depend on your theme design entirely, if your theme uses loading animations or a quick product view - you may need to rerun those scripts after the AJAX has run.

Please note that this setting can cause issues on themes that also use AJAX, as conflicts can occur. If you have any trouble with the AJAX settings, please reach out to our support team.

The accordion settings allow each filter group to be collapsible. Clicking on the filter group title will make it collapse or expand to show or hide the filters below it. You can set the accordions to always open, always closed, or open the first non-selected by default. You can also change the icon style with a choice or arrows, or plus/minus icons.

The drawer setting will hide the filters off the left side of the page, with a "Filter" button to show them. This setting can be set to always show a drawer, or to only show the drawer on mobile. You can set the mobile breakpoint in the main Filter Menu app block - the default value is 767px. Which means the drawer will enable on screens smaller than 767 pixels wide (when set to mobile only).

You'll also find options for the drawer colors, padding, and options for the drawer button design.

If you're using the "Small Boxes" display option in the Filter Menu admin - you will need to enable this app embed block as well. You'll find options for customising the color and design of the small boxes in this section.

The Filter Menu includes a Sort By section, you can choose to display it in the first or last position in the list of filters, as well as show it as a drop-down.

Sticky sidebar will keep the Filters in place as you scroll down your collection page, this works well on collection pages with infinite loading, or when displaying a larger number of items per page.

This setting works best with the Smart Sidebar display, but you can adjust the selector settings here to use it with other sidebar layouts.

You can find settings for the CSS selector - this should be the outer-most container in the sidebar. It can be a bit of a tricky setting and it does depend on your theme design, as well as the layout option you've chosen for the filters.

If you have any issues enabling this setting, please reach out to our support team.

The "View More" button allows you to shorten the list of filters in each group. Just set the number of filters to show, and the app will hide the rest, showing a button to see the rest.

This setting is pretty straightforward, force all filters to display as drop-down menus. There are two designs available, but we're happy to help if you're looking for something more customised!