When using the Existing Sidebar display mode, you will need to provide the correct selector for where you want the filter menu placed on the page.

If you have some familiarity with HTML and CSS - this should be a relatively straight-forward setup for you. If you have no experience with HTML or CSS, we'll try to keep this guide as simple as possible. If you have any troubles with setting the selectors, please reach out to our support team, we're always happy to help!

In this guide we'll be looking at the Dawn theme as it's Shopify's default theme and many other themes are based off it's design. Some of the steps may vary depending on your theme design. Some themes don't have a built in sidebar, so it's best to use our "Smart Sidebar" display mode, or reach out to our support team for a custom installation.

We're also working in Microsoft's Edge browser, the steps involving the developer tools should be exactly the same for other browsers (although the buttons and developer tools may look slightly different). The one exception is Safari, if you use Safari I'd recommend using another browser for this - unless you're familiar with the Safari developer tools and how to enable them.

One final thing to note - if you are using the Dawn theme on your store, the default values in the app will apply, you can set the "Existing Sidebar" display mode and it should work right away without further changes.

The first step is to make sure you have your theme sidebar enabled. In the theme editor, navigate to any collection page. In the Dawn theme, select "Product Grid" in the them editor sidebar:

Then find the "Filtering and Sorting" section:

After enabling the Filters and setting the sidebar display to "Vertical" in your theme, click "Save" in the theme editor.

Now the theme sidebar is enabled, you can inspect the HTML to find the selector we need. This step can be done inside the theme editor, or on a preview of the theme.

Right click anywhere in the sidebar, near the top would probably be best in most cases:

In the context menu that pops up, select "Inspect", which will open the Developer tools in your browser:

Now in the Developer tools, we need to find the "class" or "id" for one of the outer elements for the sidebar. The element you right clicked should be highlighted already in the developer tools window, now you can hover over each element above that one to find the an outer element to use, it should contain all of the theme filters in the blue box, there is no exact right or wrong element here, and some trial and error may be required.

Once you find the outer sidebar element, double click on the text in the "class" or "id" field and copy the text. Make a mental note of whether you selected a class or an id - as the selectors are slightly different.

If you see more than one class on an element, copy one that looks unique to the filters or sidebar, don't use a general class like "container".

Once you have your selector copied, go back to your theme editor, in the Filter Menu app settings, paste the class name or id you just copied into the "Selector for existing sidebar" input.

If all went well you should see the Filter Menu displayed in your theme sidebar.

On many themes, including Dawn, the mobile view uses a different sidebar, so the previous steps would need to be repeated for the mobile view. You can view the mobile site by changing to responsive view in the developer tools.

Back in the developer tools - find the Responsive view button, it should look like a computer screen and mobile screen next to each other.

Then you can select your mobile device from the drop-down menu at the top of the window:

You can also set the mobile view in your theme editor - using the display buttons at the top of the page:

Once you're in the mobile view for your store, open the theme's filtering section and right click inside the filters, select "Inspect" from the context menu. Then in the Developer Tools window work your way up through the elements, hovering over each one to highlight it to find the element to place the Filter Menu inside, for the Dawn theme, using the filter drawer, we want to put the Filter Menu below the drawer header.

Again if you see more than one class on an element, in most cases you just need to copy the first one.

You can paste the mobile selector into your theme editor, in the Filter Menu app settings, in the "Selector for existing sidebar" input, prepending it with a "." for class, or a "#" for an id. You can provide a list in this input, separated by commas.

So now in this case for the Dawn theme the "Selector for existing sidebar" input will have:

The Filter Menu may look like this on mobile:

If this is the case, we have a setting for mobile padding, to increase the whitespace on the left and tight of the filters.

In your theme editor, click on "App Embeds" in the top of the sidebar:

And then open the menu for "Custom Colors/Design", scroll down to the "Mobile Padding" setting, and set it as needed. Somewhere around 15-20 pixels is most common.

And that's it! Keep in mind these instructions are just a guide, there are many themes available and each one has a slightly different design. Please don't hesitate to reach out to our support team if you need any assistance.