> 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/filter-sidebar-design/change-filter-tree-style.md).

# Change filter tree style

Control how the filter panel is laid out on the page, and a few global display behaviors that apply across all your filter options.

## What this does

These settings control the overall shape of the filter experience across your whole store, not just one filter option. Switching **Filter layout** from **Vertical** to **Drawer**, for example, changes filters from an always-visible sidebar next to the product grid into a hidden panel that only opens when a shopper taps a button — often a better fit on narrow themes where a permanent sidebar would crowd the grid. **Horizontal** instead lines up all filter options in a bar above the grid.

Everything on this page lives in **Settings > Filter panel** (under **Appearance** in the Settings menu) and is saved with one **Save** button for the whole page.

## Choose a filter layout

1. In the app, go to **Settings > Filter panel**.
2. In the **Layout** card, click one of the three layout tiles:
   * **Vertical** — a sidebar alongside the product grid (most common).
   * **Horizontal** — a filter bar above the product grid.
   * **Drawer** — filters open in a slide-out panel triggered by a button; useful on narrow themes.
3. If you chose **Horizontal**, set **Filter bar columns** — how the filter options are arranged in the horizontal bar: **1 column**, **2 columns**, **3 columns**, or **Show all filter options**.
4. Click **Save** in the bar at the top of the page.

![Settings > Filter panel — Layout card with Vertical, Horizontal and Drawer tiles](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-52106ce964aace2eb28c80b96d1a7bc48ef3433b%2Fsettings-filter-panel-layout.png?alt=media)

### Follow the theme's filter layout

Also in the **Layout** card, **Follow the theme's filter layout** makes the filter layout fit your theme as closely as possible. While it's on, a warning reminds you that some of the style settings on this page may be overridden.

{% hint style="info" %}
Looking for the **Show filters / Hide filters** button? It has moved to [Quick Filters](/filters/quick-filters.md), together with the other controls shown in the bar above the product grid.
{% endhint %}

## Option list

The **Option list** card controls how each filter group and its values appear:

* **Matching product count** — show or hide the "(12)"-style count next to every value. See [Hide matching product count in filter options](/filters/filter-sidebar-design/hide-matching-product-count-in-filter-options.md).
* **Groups with a single value** — **Hide** a filter group once it only has one value left (it can't narrow the results any further), or **Keep visible**.

## Refine by

**Refine by** is the row of chips listing the filters a shopper has applied (for example "Color: Blue ✕"), so they can see and remove their choices at a glance.

1. In the **Refine by** card, turn on **Show Refine by**. Turning it off hides the chips from both the filter panel and the product grid toolbar.
2. Choose where the chips appear:
   * **In the filter panel** — **Desktop and mobile**, **Desktop only**, **Mobile only**, or **Hidden**.
   * **On the product grid toolbar** — the same four choices.
3. Set **Chip shape** (**Square** or **Rounded**) and the chip **Text color**, **Close icon color**, and **Background color**.
4. Click **Save**.

![Settings > Filter panel — Refine by card](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-f8c659ba0844b5db9ac677b9d15db15be63d9369%2Fsettings-filter-panel-refineby.png?alt=media)

## Text styles

Three cards further down the page style the text in the filter panel. Each has **Font size**, **Font weight**, **Text transform** (**None**, **Capitalize**, **Uppercase**, or **Lowercase**), and colors:

* **Filter label** — the label above each filter group (for example "Color").
* **Filter values** — each filter value in the list (for example "Blue").
* **Filter button** — the Show filters / View results controls, with extra **Border radius**, **Border color**, and **Background color** settings.

The **Filter values** card's **Text transform** is the store-wide default a filter option falls back to when its own **Option value text transform** is set to **Use global setting** — see [Manage filter option values](/filters/filter-options/configure-filter-options/manage-filter-option-values.md).

## For developers

The **Advanced** card's **Custom filter tree template** switch exposes the app's filter tree markup as an editable theme file, for layout control beyond the options above. See [Customize filter sidebar template](/filters/filter-sidebar-design/customize-filter-sidebar-template.md) for the setup steps. Most stores get a good result from the layout and style options above without needing it.

## Related pages

* [Configure filter sidebar](/filters/configure-filter-sidebar.md)
* [Quick Filters](/filters/quick-filters.md)
* [Hide matching product count in filter options](/filters/filter-sidebar-design/hide-matching-product-count-in-filter-options.md)
* [Customize filter sidebar template](/filters/filter-sidebar-design/customize-filter-sidebar-template.md)