How to display and style filters in the Search Results Widget

On desktop devices, you can display filters at the top of the Search Results Widget, in a sidebar, or in a sidebar drawer. The drawer keeps filters hidden until a customer selects Filters.

Displaying filters depends on the Search Results Widget‘s template you set up in the Searchanise Search & Filter control panel > Search & Navigation > Search results widget section > Template & Style tab:

• The Modern, Modern dark, Big pictures classic templates
• The Big Pictures template

The Modern, Modern dark, Big pictures classic templates

By default, the Search Results Widget shows filters both at the top of the page and on the left-hand side.

But you can opt to have one or the other. To do so, follow these steps:

1. Go to the Searchanise control panel > Search & Navigation > Search results widget section > Content tab.
2. Set one of the following toggles to OFF:
   • Show filters in sidebar if you’d like to have the filters at the top only.
   • Show filters top section if you’d like to have the filters on the left-hand side only.
3. Apply the changes.

That’s it. You can now go to your storefront and make sure that only one of the options is visible.

Display filters in a drawer

To show sidebar filters in a slide-out drawer:

1. Go to Search & Navigation > Search results widget section > Content tab.
2. Turn on Show filters in sidebar.
3. In Sidebar style, select Drawer.
4. Click Apply.

On the storefront, customers will see a Filters button. Selecting it opens the filters in a panel that slides in from the left. The panel can be closed using the close button or by clicking outside it. Selected filters remain applied after the panel is closed.

To restore the regular left-side layout, select Standard in Sidebar style.

The Big pictures template

By default, the Search Results Widget shows filters on the left-hand side.

However, you can show filters at the top of the page instead of the left-hand side. To do so, follow these steps:

1. Go to the Searchanise Search & Filter control panel > Search & Navigation > Search results widget section > Content tab.
2. Select the Top section value in the Filters position option.
3. Apply the changes.

That’s it. The filters are now at the top of the page.

Display filters in a drawer

To show sidebar filters in a slide-out drawer:

1. Go to Search & Navigation > Search results widget section > Content tab.
2. Set Filters position on desktop to Sidebar.
3. In Sidebar style, select Drawer.
4. Click Apply.

On the storefront, customers will see a Filters button. Selecting it opens the filters in a panel that slides in from the left. The panel can be closed using the close button or by clicking outside it. Selected filters remain applied after the panel is closed.

Note

The Sidebar style setting affects desktop devices only. Filters on mobile devices keep their existing layout and behavior.

To restore the regular left-side layout, select Standard in Sidebar style.