When using the Smart Sidebar display mode, you will need to provide the correct selector for the container classes, this will make sure your page layout stays consistent.

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 selector, 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.

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 "Smart Sidebar" display mode and it should work right away without further changes.

The first thing to do is enable the Smart Sidebar display mode. Make sure your theme's filters are disabled - it should be an option in your collection or product grid section. Then once you've added the Filter Menu Theme Extension to your theme, move the "Apps" section so it's above the Product grid. You can click and drag sections to move them in the theme editor sidebar, it should look like this:

Next, click on "Filter Menu" in the theme editor sidebar, this will bring up the Filter Menu settings. Select "Smart Sidebar" from the "Display Mode" dropdown:

Now you'll probably notice the Filter Menu is pushed up to the left side of the page. This is where the container classes come in, they keep you page aligned on the left and right sides.

Now the smart 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.

Find any section of the page that is still aligned correctly. Like the collection title or main navigation. Right click on the element and select "Inspect" from the context menu, which will open the Developer tools in your browser:

Now in the Developer tools, we need to find the "class" for one of the outer elements that contains the element we just right clicked. 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 elements in the section, and the page will be highlighted to show the padding and margins we need. There is no exact right or wrong element here, and some trial and error may be required as the container class will depend on your theme design.

Note the orange margin and green padding highlighting in the video below, this is what you're looking for in your container class. In this case the class is "page-width". Many themes use this or something similar.

You only need to copy a single class. So here we've copied the "page-width" class.

Now back in the theme editor we can paste the container class that we just found, then "Save" if all looks good:

And that's it! If you have any troubles with this setup please reach out to our support team, we'll be happy to help!