Filter Button
A configurable filter button with Shopify and CMS properties that updates the catalog in real time and syncs to the URL.
Last updated
How to use
Insert Filter Button from the plugin onto your catalog page.
Select it on canvas with the plugin open, and it'll show the Filter configuration screen automatically.
In the plugin, pick the filter type with
Property, then chooseValues: Single for one button per value, or List to expand this one instance into a full facet of options. Populate the actual values (and optional custom labels) there too.Back in the canvas, choose
Mode: Config to style the built-in option —Default/Hover/Selectedstates, plusStyle,Show Text,Font, andTransform— or Connect to use your own design instead, via⦿ Selected/⦿ Unselected.
Turning one instance into a full facet of options
For the list-style facets (a facet is one filter group, like Color or Product Type) — Product Tag, Product Type, Collection, Variant, and Price — a single instance can generate one option per value instead of one instance per value, populated via the Butter plugin's value picker. Set Property to Collection, Product Type, Product Tag, or Variant, switch Values to List, then populate Filter Values in the plugin — each value you pick becomes a row, and each row becomes a selectable option.
In Connect mode, your ⦿ Unselected / ⦿ Selected designs are repeated once per row; nest a Filter Text (once per Option: Title and once per Option: Value) and a Swatch inside them so each option shows its own row's details.
| Shows |
|---|---|
Filter Text (Option: Property) | Facet label — Collection, Product Tag, Variant, … |
Filter Text (Option: Title) | CMS field or variant option title; hidden when not applicable |
Filter Text (Option: Value) | The row's filter value |
Swatch | Color/image swatch from the row |
Populating filters from the Butter plugin
The plugin's Filter panel is where you populate the actual values for whatever Property and Values mode you picked — Framer's own panel holds the storage, but isn't a practical way to author it by hand:
| Plugin configures |
|---|---|
CMS | CMS title (field picker from your Products collection) + value; List: same field title, multi-select values (one option per value) |
Variant | Single: option title + value (including "All variants" — any option's title:value combo); List: option title + multi-select values, or "All variants" for values across every option |
Product Tag / Type / Collection / Vendor | Single value picker or List multi-select |
Price / Discount | Single: range/under/over thresholds (plus equals for Discount), converted automatically for each market's currency; List (both): configure multiple filters, one option per threshold |
On Sale / In Stock / Subscriptions / Bundles | Single: one Is/Is-not toggle; List: one option per condition (e.g. both "Is a bundle" and "Is not a bundle" as independently toggleable options), via the same |
Edits are local until you click Apply changes; closing the panel with unsaved edits asks you to confirm discarding them first.
Swatches stay consistent across Connect and Configure
Each filter value can carry its own color or image swatch, but you don't have to set them one by one. The plugin's Settings > Variant Swatches screen holds a shared set of colors and images, and any value without its own swatch automatically picks up the shared one matching its name — for every property, not just Variant.
This works the same in both modes: a connected Swatch design and the built-in swatch style (Style set to swatch) both read the same shared set, with image swatches rendering per row rather than as a single static image. If you set an explicit hex color on a built-in option, that color wins.
Custom labels support dynamic price/discount tokens
Display Text (Single mode) and a List row's Custom label are templates, not just literal text: {{value}} is substituted with the resolved, market-converted amount for Under/Over (Price) or Equals/Under/Over (Discount) filters, and {{min}} / {{max}} for Range — so "Under {{value}}" reads "Under $100" in USD and "Under €88" in EUR without re-authoring per market. Discount Percent tokens format as bare numbers (e.g. "Over 20% Off"); Discount Amount tokens format as money, the same as Price. A label with no tokens behaves exactly as before — literal text, unaffected by market.
Missing per-market values convert automatically
If a customer's active market doesn't have its own authored value for a Price or Discount-Amount filter, Butter converts the store default into that market's currency automatically — you don't need to author every threshold in every currency.
Discount filters get one more option than Price: Equals, for an exact-match discount, alongside Under / Over / Range.
Constraints & gotchas
Property and value naming must match the synced CMS fields. A non-matching filter doesn't error — it silently matches nothing, which is the usual cause of a filter that shows zero results.
Switching Property before clicking Apply changes discards whatever you'd just configured for the previous property — only values you've already applied round-trip when you come back to a property. Switching Values between Single and List carries values over on a best-effort basis, not losslessly: Single → List starts with everything selected, and List → Single keeps only the first selected value, dropping the rest.
Value pickers (CMS field values, variant options, product types/tags/collections/vendors) read from your synced Products CMS collection — if it hasn't been synced yet, the panel shows an empty state instead of fabricating values.