Filter Builder Guide

Build powerful filters with 6 filter types - from dropdowns to range sliders. Insert via plugin or copy from dashboard, then add any filter type through the property panel.

All filters are built using the CMS Filters component. Insert via plugin or copy from dashboard → Add filters in property panel. No code needed!

Available Filter Types

📝

Text Filter

Search within Text fields like product names, descriptions, or tags. Perfect for partial matching.

Contains textExact matchStarts with
🔢

Number Filter

Filter Number fields like price, rating, or quantity. Users enter specific values or ranges.

EqualsGreater thanLess than
📋

Dropdown Filter

Create custom filter options with your own values. Display as dropdown, checkboxes, or tag buttons.

Multi-selectSingle-select
📊

Range Filter

Perfect for price ranges, ratings, or any Number field. Choose between dual inputs or an interactive range slider.

Dual inputsRange slider
🔘

Toggle Filter

Filter Toggle fields like "Featured", "In Stock", or "Published". Choose switch, pill, or radio button styles.

Yes/No/AllSwitch styleRadio buttons
🏷️

Option Filter

Automatically loads options from Option fields like Category, Status, or Type. Shows item counts for each option.

Auto-loads optionsItem countsMulti-select

How to Add Filters

After inserting CMS Filters (via plugin or copy from dashboard), add individual filters in the property panel. Each filter connects to a field in your CMS collection.

🎯 Quick Setup

  1. 1. Click "+" in property panel → Add new filter
  2. 2. Choose filter type → Pick the best type for your field
  3. 3. Select CMS field → Connect to your collection field
  4. 4. Customize settings → Style and configure options

Setting Up Each Filter

Every filter needs these basic settings in the property panel:

  • Filter Label: What users see (e.g., "Price Range", "Category")
  • CMS Field: Which field to filter (must match your collection field name exactly)
  • Filter Type: Text, Number, Dropdown, Range, Toggle, or Option
  • Display Options: Show/hide labels, customize styling

How Filters Work Together

Control how multiple filters combine to narrow down results. Set these options in the property panels:

🎯 "All" Logic (Narrow Results)

Items must match ALL selected filters

Example: Show products that are:
  • Category: Electronics AND
  • Price: $100-500 AND
  • In Stock: Yes
Only items matching all three filters will show

🔀 "Any" Logic (Broaden Results)

Items match ANY of the selected filters

Example: Show products that are:
  • Category: Electronics OR
  • Category: Computers OR
  • Featured: Yes
Items matching any filter will show

💡 Most Common Setup

Use "All" logic for most e-commerce and listing sites. This creates the familiar filtering experience users expect - each filter narrows down the results further.

Which Filter Type to Use

Your CMS Field TypeBest Filter TypeUse When
Text (Title, Description)Text FilterUsers need to search within content
Number (Price, Rating, Age)Range Filter or Number FilterRange for price/age, Number for exact values
Toggle (Featured, In Stock)Toggle FilterYes/No/All options work best
Option (Category, Status, Type)Option FilterAutomatically loads all your options
Custom options (not in CMS)Dropdown FilterCreate your own filter options

Common Filter Setups

🛍️ E-Commerce Store

Category Filter

  • Type: Option Filter
  • Field: Category (Option field)
  • Style: Tag buttons with item counts
  • Logic: "Any" (show items from any selected category)

Price Range

  • Type: Range Filter
  • Field: Price (Number field)
  • Style: Range slider with $0-$1000 range
  • Display: Show dollar signs ($)

In Stock

  • Type: Toggle Filter
  • Field: InStock (Toggle field)
  • Style: Switch with Yes/No/All options

📝 Blog/Content Site

Article Category

  • Type: Option Filter
  • Field: Category (Option field)
  • Style: Tag buttons
  • Logic: "Any" (show posts from any category)

Author

  • Type: Dropdown Filter
  • Field: Author (Text field)
  • Style: Checkboxes with custom author list