> 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

This setting controls 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 mobile or narrow themes where a permanent sidebar would crowd the grid. **Horizontal** instead lines up all filter options in a bar above the grid.

## Steps

1. In the app, go to **Settings > Filter panel**.
2. Under **Filter layout**, choose one:
   * **Vertical** — a sidebar alongside the product grid (most common).
   * **Horizontal** — a filter bar above the product grid.
   * **Drawer** — filters open in an off-canvas panel triggered by a button; useful on mobile or narrow themes.
3. Click **Save**.

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

## Other filter panel behaviors on this page

* **Show the number of matching products** — show/hide the "(12)"-style count next to each value. See also [Hide matching product count in filter options](/filters/filter-sidebar-design/hide-matching-product-count-in-filter-options.md).
* **Hide filter options when only one value** — automatically hide a filter option from shoppers when it currently has only one selectable value (there's nothing useful to filter by yet).
* **Use theme filter layout** — let the app match your theme's native filter styling as closely as possible. Some manual style customizations may be overridden while this is on.
* **I want to customize the filter tree template** — for stores that need deeper layout control; see the developer note below.

## Refine by

**Refine by** controls where shoppers can open the filter panel from, separately for desktop and mobile:

* **On filter sidebar** — show the filter entry point alongside the product grid.
* **On product grid toolbar** — show the filter entry point in the toolbar above the product grid (next to sorting).

Toggle **Show on desktop** / **Show on mobile** independently for each location.

![Refine by section with desktop/mobile toggles](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-5fa038fa8722425261a8068e76decdb14bb111d5%2Fsettings-filter-panel-refineby.png?alt=media)

## Global text case default

Further down the same **Settings > Filter panel** page, the **Filter label**, **Filter values**, and **Filter button** style sections each have their own **Text transform** control (**None**, **Capitalize**, **Uppercase**, or **Lowercase**), alongside font size, font weight, and color settings for that element. The **Filter values** section'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

**"I want to customize the filter tree template"** 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 exact 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)
* [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)