Core Concepts

Whether you're building your first filter system or troubleshooting an advanced setup, understanding these core concepts will help you work faster and solve problems with confidence.

New to CMS Filter? All these components are available in the Framer CMS Filter Plugin or from your dashboard.

How Components Connect

CMS Filter components automatically share data when they use the same store key. This lets your search, filters, and results stay in sync without any extra setup.

Store Keys Explained

Store Key: 'auto' (Default) - Automatically uses your CMS collection name

Store Key: 'custom-name' - Use a custom name when you have multiple filter groups

📱 Example: Products Filter Group

All these components work together because they share the same store key:

  • ✓ CMSCollection (storeKey: 'products')
  • ✓ CMSSearch (storeKey: 'products')
  • ✓ CMSFilters (storeKey: 'products')
  • ✓ CMSCount (storeKey: 'products')

They all stay in sync automatically!

Filter Logic Levels

CMS Filter has three levels where you can choose AND or OR logic:

Level 1: Global

In CMSCollection properties

'All' (AND) - Narrow results, all must match

'Any' (OR) - Broaden results, any can match

Level 2: Builder

In CMSFilters properties

'All' (AND) - All filters must match

'Any' (OR) - Any filter can match

Level 3: Field

For multi-select filters

'All' (AND) - Match all selected

'Any' (OR) - Match any selected

Real-World Example

🛍️ E-commerce Product Search

User searches for: "laptop"

With filters:

  • Category: Electronics OR Computers (Level 3: Any)
  • Price: Over $500
  • Featured: Yes
  • In Stock: Yes

Result: Shows laptops that are (in Electronics or Computers category) AND cost over $500 AND are featured AND in stock.

Component Connection Pattern

Components auto-connect through store keys with zero configuration:

✨ Simple Setup (Single Filter Group)

  1. 1. Add CMSCollection - Set storeKey to 'auto'
  2. 2. Add other components (Search, Filters, etc.) - Set storeKey to 'auto'
  3. 3. Done! They're connected automatically

🎯 Multiple Filter Groups (Advanced)

Group 1: Featured Products

  • CMSCollection (storeKey: 'featured')
  • CMSFilters (storeKey: 'featured')

Group 2: All Products (Independent)

  • CMSCollection (storeKey: 'all-products')
  • CMSFilters (storeKey: 'all-products')

Each group works independently on the same page!

Empty State Handling

When filters return no results, you have three options depending on your design needs:

1. Custom Empty State Slot (Recommended)

Best for branded experiences. Connect any component to the "Empty State" slot for full design control - add illustrations, CTAs, or suggested actions.

2. Fallback Text

Quick and simple. Use the built-in empty state when you just need basic text. Configure these properties in CMSCollection:

  • Show Empty State: Toggle on
  • Empty State Text: "No items found" (or your custom message)
  • Font Size & Color: Style to match your design

3. Canvas Placeholder

During development in canvas mode, shows setup instructions to help you configure the component.

Dynamic Styling with Variant Overrides

Want a badge to change color based on stock status? Or show a "Sale" tag only for discounted items? Variant overrides let you dynamically style components based on your CMS data.

💡 Real-World Example: Status Badges

Imagine you have a StatusBadge component with two variants:

"Active" Variant (Green)

"Inactive" Variant (Gray)

In the property panel:

  • • Component Name: StatusBadge
  • • If field "Status" equals "active" → Use "Active" variant
  • • Otherwise → Use "Inactive" variant

The badge automatically changes color based on your CMS data!

Built for Speed

CMS Filter is optimized to keep your site fast, even with complex filters:

  • Instant Search: Results appear as you type (with smart 300ms delay to avoid lag)
  • No Duplicate Loading: Data is fetched once and shared across all components
  • Independent Filter Groups: Multiple filter sets on one page won't slow each other down
  • Efficient Updates: Only components with changed data refresh

Canvas vs Preview/Live

Why doesn't my filter work in the canvas? CMS Filter components show placeholders while you design, but activate when you preview or publish.

Canvas Mode (Design Time)

  • Shows placeholder UI to help with layout
  • Displays setup instructions if something's missing
  • No live data - click Preview to test functionality

Preview/Live Mode (Runtime)

  • Full filtering functionality
  • Real-time updates as users interact
  • Actual CMS data from your collection
Pro Tip: Always test your filters in Preview mode before publishing. Use Cmd/Ctrl + P to quickly toggle between Canvas and Preview.