> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/filters/quick-filters.md).

# 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](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-90b3dba6bc4d4139f123a494db700687926deed3%2Fquick-filters-storefront.png?alt=media)

## 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](/filters/configure-filter-sidebar.md).

## 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](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-c95b17361f45f786812f9e9ae142b339a6b93303%2Fsettings-quick-filters.png?alt=media)

## 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.

{% hint style="info" %}
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](/product-grid/manage-sorting-products.md).
{% endhint %}

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](/filters/filter-sidebar-design/change-filter-tree-style.md)), 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](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-dbcecb571056d1ca5dd7bbe51643060cabdfadfd%2Fedit-filter-option-show-in-quick-filters.png?alt=media)

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.

## Related pages

* [Configure filter options](/filters/filter-options/configure-filter-options.md)
* [Change filter tree style](/filters/filter-sidebar-design/change-filter-tree-style.md)
* [Manage sorting products](/product-grid/manage-sorting-products.md)