Filters
Settings
| Setting | ID | Type | Default | Description |
|---|---|---|---|---|
| Show sort order | filters_show_sort | checkbox | true | |
| Enable sticky | filters_sticky | checkbox | false | |
| Collapse filter column | collapsed_column | range | 5 | Groups holding more values than this start collapsed. |
| Show filter counts | filters_counter | checkbox | false | Only the plain checkbox lists show counts; options rendered as buttons or swatches never do. |
| Show filter values in two columns | filters_twocols | checkbox | false | |
| On selecting a filter, automatically apply 'Out of stock' | filters_autohide_unavailable | checkbox | false | Requires the Availability filter to be enabled. |
| Custom style | label_custom_style | checkbox | false | |
| Size (mobile) | label_size_mob | select | text-xs | |
| Size (desktop) | label_size | select | text-xs | |
| Label color | label_color | select | base-text | |
| Custom color | label_color_custom | color_background | ||
| Label text uppercase | label_upper | checkbox | true | |
| Filters to show as buttons | filters_buttons | text | Size | |
| Custom style | filtersbtn_custom_style | checkbox | false | |
| Background | filtersbtn_bg | color | #ffffff | |
| Text color | filtersbtn_text | select | base-text | |
| Custom color | filtersbtn_text_custom | color_background | ||
| Border color | filtersbtn_border | color | #d1d5db | |
| Border color (hover) | filtersbtn_border_hover | color | #111827 | |
| Background (active) | filtersbtn_bg_active | color | #111827 | |
| Text color (active) | filtersbtn_text_active | select | base-text | |
| Custom color | filtersbtn_text_active_custom | color_background | ||
| Radius | filtersbtn_radius | select | rounded-md | |
| Enable swatches icon | filters_swatches | checkbox | true | |
| Swatches layout | filters_swatches_layout | select | 2 | No label shows the color chips only, with no button frame around them. |
| Show swatch border | filters_swatches_border | checkbox | true | Adds a 1px border in each swatch's own color with a white ring between the border and the color ball. Turn off for a flat color chip. |
| Swatch shape | filters_swatches_shape | select | rounded-circle | |
| Class | filters_class | text | lg:me-4 | |
| Background | filters_bg | color_background | ||
| Border | filters_border | range | 0 | |
| Border color | filters_border_color | color | ||
| Radius | filters_radius | select | rounded-md | |
| Shadow | filters_shadow | select | shadow-none | |
| Class | filtersgroup_class | text | p-3 | |
| Background | filtersgroup_bg | color_background | ||
| Border | filtersgroup_border | range | 0 | |
| Border color | filtersgroup_border_color | color | ||
| Radius | filtersgroup_radius | select | rounded-md | |
| Shadow | filtersgroup_shadow | select | shadow-none |
Option values
- Size (mobile) (
label_size_mob): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Size (desktop) (
label_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Label color (
label_color): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Text color (
filtersbtn_text): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Text color (active) (
filtersbtn_text_active): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Radius (
filtersbtn_radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Swatches layout (
filters_swatches_layout): One column (1), Two column (2), Buttons (3), No label (0) - Swatch shape (
filters_swatches_shape): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Radius (
filters_radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Shadow (
filters_shadow): None (shadow-none), Small (shadow-sm), Default (shadow), Medium (shadow-md), Large (shadow-lg) - Radius (
filtersgroup_radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Shadow (
filtersgroup_shadow): None (shadow-none), Small (shadow-sm), Default (shadow), Medium (shadow-md), Large (shadow-lg)