thegeneralyst/AnopaDocs
Catalog & Search

Anopa Filter

Renders a single filterable dimension — categories, tags, collections, colors, vendors, a named variant option, or price. Multiple instances build a complete filter sidebar. All share state through the Anopa filter store.

What it does

Anopa Filter renders a single filterable dimension for collection and search pages. You can add multiple instances of this component to build a complete filter sidebar or toolbar. All instances share state through the Anopa filter store, so selections made in one filter are reflected across all others.

Supported variants:

Property Controls

ControlTypeDefaultDescription
VariantEnumCategoriesSelect which dimension this filter controls: Categories, Tags, Collections, Colors, Vendors, Option, or Price.
Option NameStringSizeShopify option name used when Variant is set to Option (e.g. "Size", "Material"). Must match the option name in Shopify exactly.
Price ConfigObjectMode: range | under | over; Min: 0; Max: 1000; Display text: e.g. "Price"Configuration for Price variant: mode (range/under/over), minimum and maximum values, and display text label.
Display AsEnumAutoControls how filter options are rendered: Auto, Checkboxes, Buttons, Dropdown, or Swatch.
LayoutEnumVerticalLayout orientation for the filter options: Vertical (stacked) or Horizontal (row-based).
Accent ColorColor#007bffBase accent color used for active states, selection indicators, and badges.
Show TitleBooleantrueToggle to show or hide the filter section title above the options.
Show CountBooleantrueToggle to show or hide the active selection count badge next to the title.
Enable SearchBooleanfalseWhen enabled, shows an in-filter search input for long option lists (only appears when items > 5).