Filter Chips
Shows one removable chip for each active filter applied to the catalog.
Last updated
How to use
Create a chip frame/component (tag, row, etc.).
Inside the chip, add Filter Chip Value for the label and Filter Chip Remove for the remove control.
Place this component near the catalog and connect your chip design to
⦿ Chip.Configure
Layout(defaults to a horizontal Stack with wrap).
Pair Filter Chips with Filter Button so customers can add filters, and optionally a Filter Reset Button to clear all of them at once.
Connect slot components inside your chip design
| Purpose |
|---|---|
Filter Chip Value | Renders the filter label — styled via Font, Color, Transform. |
Filter Chip Remove | Connected remove button — clicking it removes that filter value. |
Value and Remove read from the surrounding chip rather than from their own controls, so they must live inside the design connected to ⦿ Chip.
How chips are generated and labeled
Each active filter value gets its own chip, using the design you connected to ⦿ Chip — so collection=shirts,pants produces two chips, and the Filter Chip Value and Filter Chip Remove nested inside each one automatically show and remove that chip's own filter.
Labels vary by filter type: List and CMS-field filters show the raw value; price and discount filters use Under/Over/Range wording in the customer's active market currency; booleans render as On sale / In stock / Not on sale style labels (both true and false count as active). Live, the whole component is hidden when no filters are active. On canvas, it shows Preview sample chips (1–5) with mock labels (Summer, Shirt, …) — an empty-state prompt appears until a chip design is connected to ⦿ Chip.
What's excluded from the chip strip
Search terms, sort order, page number, market, and tracking tags (utm_ and similar) never get a chip — the same rules Filter Counter and Filter Reset Button follow. A custom label you set on a Filter Button isn't reused here — price and discount chips always use the standard Under/Over/Range wording in the customer's currency.
One thing to know: any other simple lowercase query parameter in the URL is treated as an active filter and gets a chip — even one added by hand with no matching Filter Button on the page. So a link like ?ref=newsletter would show a stray "newsletter" chip; keep campaign links to utm_-style parameters, which are always ignored.
Filter Chips vs. Filter Reset Button
Filter Reset Button clears every active filter at once. Filter Chips let customers remove filters one at a time. One chip template is replicated for every active filter — per-filter custom styling isn't supported, so use a single chip design for all of them.