For the complete documentation index, see llms.txt. This page is also available as Markdown.

Quick Filters

Add a slim bar above the product grid with a Show/Hide Filters button, one-click filter dropdowns, and a sort menu.

What this does

Quick Filters is a slim bar that sits right above the product grid on collection and search pages. It gives shoppers the controls they reach for most without scrolling to the filter panel:

  • Show Filters / Hide Filters button — collapses the filter panel so the product grid gets the full page width, and brings it back with one click.

  • Inline filter options — the filter options you pick (for example Color, Size, Price) appear as compact dropdowns in the bar. A shopper clicks Color, ticks Blue, and the grid updates — the same filtering as the main panel, just one click away.

  • Sort by — a sort dropdown in the same bar, so sorting and filtering live side by side.

You choose which of these appear on desktop and which on mobile, and you style the bar (font size, corner radius, colors) so it matches your theme. You can also make it stick to the top of the screen while shoppers scroll through a long collection.

Storefront — Quick Filters bar with the Hide Filters button, an inline filter option, and the sort menu

Before you start

Quick Filters shows up wherever the app's filter or product grid is displayed, so the app must already be showing filters on the page — see Configure filter sidebar.

Turn Quick Filters on or off

  1. In the app, go to Settings > Quick Filters (under Appearance in the Settings menu).

  2. Use the switch next to the page title to turn Quick Filters on or off. The badge next to Quick Filters in the Settings menu shows On or Off.

  3. Click Save in the bar at the top of the page.

When Quick Filters is off, the bar is removed from your storefront and the settings below are hidden.

Settings > Quick Filters — switch next to the page title and the bar settings

Choose what appears in the bar

On Settings > Quick Filters, set each part of the bar:

Setting
What it does

Show "Show Filters" / "Hide Filters" button

Adds a button that collapses and expands the filter panel. It appears on desktop.

Inline filter options

Where the filter dropdowns appear: Desktop and mobile, Desktop only, Mobile only, or Hide.

Sort by

Where the sort dropdown appears: Desktop and mobile, Desktop only, Mobile only, or Hide.

Click Save when you're done.

The sort dropdown only appears when shoppers have more than one sort option to choose from. Pick those options in Settings > General > Sorting — see Manage sorting products.

If every part is hidden for a device, the bar isn't shown on that device at all.

With the Drawer filter layout

When your Filter layout is Drawer (see Change filter tree style), the filter panel is hidden until a shopper opens it — so the bar always includes a Show Filters button that opens the panel, on both desktop and mobile.

Pick which filter options show in the bar

Inline filter options only shows the options you've marked for Quick Filters. You do this per filter option:

  1. In the app, go to Filters and open the filter you want to edit.

  2. Open a filter option (for example Color).

  3. Under Display options, check Show in Quick Filters.

  4. Optionally uncheck Show in filter panel if you want this option to appear only in the Quick Filters bar.

  5. Click Save. Repeat for every option you want in the bar.

Edit filter option — Display options with Show in filter panel and Show in Quick Filters checked

How the two checkboxes work together:

  • Both checked — the option appears in the filter panel and as a dropdown in the Quick Filters bar.

  • Only Show in Quick Filters — on desktop with the Vertical layout, the option appears only in the bar. With the Horizontal or Drawer layout, and on mobile, it's also included in the filter panel, so shoppers can always reach it.

  • Neither checked — the option is hidden from shoppers everywhere. The app shows a warning ("Hidden from both the filter panel and Quick Filters") so this doesn't happen by accident.

Dropdowns in the bar always start closed, whatever the option's Collapse setting in the filter panel.

Style the bar

Still on Settings > Quick Filters:

  • Font size — text size in the bar, 10–100 px.

  • Corner radius — how rounded the buttons and dropdowns are, 0–24 px.

  • Text color, Background color, Border color — colors for the buttons and dropdowns.

  • Stick to the top when scrolling — keeps the bar visible at the top of the screen while the shopper scrolls the product grid.

Click Save in the bar at the top of the page.

Good to know

  • The Show Filters / Hide Filters button replaces the older "Show filters / Hide filters button" setting that used to live on Settings > Filter panel — it's now managed here.

  • By default, Quick Filters is on, showing Inline filter options on desktop and Sort by on mobile. Nothing appears in the inline area until at least one filter option has Show in Quick Filters checked.

Last updated

Was this helpful?