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
In the app, go to Settings > Filter panel.
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.
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.
Click Save in the bar at the top of the page.
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.
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.
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.
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.
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.
Set Chip shape (Square or Rounded) and the chip Text color, Close icon color, and Background color.
Click Save.
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.
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 for the setup steps. Most stores get a good result from the layout and style options above without needing it.
Related pages
Last updated
Was this helpful?