Advanced Topics

Deep dive into advanced features and patterns for power users. Learn about multi-group filtering, variant overrides, performance optimization, and troubleshooting.

Multiple Filter Groups

You can have multiple independent filter groups on the same page using custom store keys. Each group maintains its own state.

⭐ Featured Products Section

  • ✓ CMSCollection (storeKey: 'featured-products')
  • ✓ CMSSearch (storeKey: 'featured-products')
  • ✓ CMSFilters (storeKey: 'featured-products')

🛍️ All Products Section

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

These two groups work completely independently on the same page!

Use descriptive store keys like "main-products", "sidebar-products", "featured-items" to keep track of multiple groups.

Variant Overrides

Dynamically change component variants inside CMS Items based on field values.

How It Works

🎨 Variant Override Setup

In CMSCollection property panel, add variant overrides:

Example 1: Status Badge

  • • Component Name: 'StatusBadge'
  • • Variant Name: 'Active'

Example 2: Price Tag

  • • Component Name: 'PriceTag'
  • • Variant Name: 'Sale'

Dynamic Overrides Based on Data

You can conditionally set variants based on CMS field values:

💡 Example: Dynamic Badge Colors

Step 1: In your CMS Item component

  • • Name the badge component "StatusBadge"
  • • Create variants: "Active", "Pending", "Inactive"

Step 2: In CMSCollection property panel

  • • Component Name: StatusBadge
  • • Variant Name: Use CMS field "Status"

✓ Result:

Badge automatically changes color based on each item's status field!

Use Cases

  • Show different badge colors for product statuses
  • Highlight featured items with special styling
  • Display sale tags on discounted products
  • Show availability indicators
  • Apply theme variations based on category

Performance Optimization

Built-in Optimizations

CMS Filter includes several performance optimizations by default:

  • Smart Caching: Results are cached to avoid unnecessary recalculations
  • Debouncing: Search input debounced (default 300ms)
  • Query Deduplication: Prevents duplicate data fetches
  • Conditional Rendering: Components only re-render when state changes
  • Store Isolation: Multiple filter groups don't interfere

Best Practices for Large Collections

🔍 1. Increase Search Delay

In CMSSearch property panel:

• Debounce Delay: 500ms

Waits longer before filtering as you type

📄 2. Limit Initial Results

In your CMS List settings:

• Items Per Page: 20

Shows fewer items at once

🎯 3. Limit Search Fields

In CMSSearch property panel:

• Search Fields: Only 'Title'

Don't search long Description fields

🔢 4. Disable Post Count

In CMSFilters for option filters:

• Show Post Count: Off

Skips counting for faster performance

Multi-Column Filter Layouts

Arrange filters in multiple columns for better space utilization:

📐 Multi-Column Setup

In CMSFilters property panel → Filter Container Styles:

  • Columns: 2 (or up to 4)
  • Gap: 16px between columns

Filters will flow left-to-right, top-to-bottom. Perfect for sidebar layouts!

Two-column filter layout in sidebar

Filters arranged in 2 columns for compact display

Responsive Layouts

CMSCollection supports dynamic layout switching:

📱 Layout Toggle Setup

In CMSCollection property panel:

Basic Settings:

  • • Layout Toggle: On (enables switching)
  • • Layout Display: Flex or Grid (default view)

For Flex Layout:

  • • Flex Direction: Horizontal or Vertical
  • • Gap: 16px

For Grid Layout:

  • • Grid Columns: 3 (or any number)
  • • Gap: 16px

Debug Mode

Enable debug mode during development to see internal state:

CMSCollection Debug

🐛 CMSCollection Debug Mode

In property panel, set Debug Mode: On

Shows:

  • • Store key
  • • Active filters
  • • Search term
  • • Result count
  • • Generated query

CMSFilters Debug

🐛 CMSFilters Debug Levels

In property panel, choose Debug Level:

  • Hide: Production mode (no debug output)
  • UI Helpers: Shows component state in UI
  • Full Debug: Console logs + UI state (verbose)

Troubleshooting Guide

Components Not Connecting

Problem: Search doesn't affect collection results.

Solutions:
  • ✓ Verify all components have identical storeKey
  • ✓ Check that CMSCollection has CMS List connected to slot
  • ✓ Enable debug mode to see store key
  • ✓ Refresh preview after making changes

Filters Not Working

Problem: Filters don't affect results.

Solutions:
  • ✓ Verify fieldName exactly matches CMS field (case-sensitive)
  • ✓ Check field type matches filter type
  • ✓ Enable debug mode to inspect generated queries
  • ✓ Test with simpler filter first

Empty Results When Shouldn't Be

Problem: No results show even with no filters.

Solutions:
  • ✓ Check CMS items are published
  • ✓ Verify CMS List is connected to CMSCollection slot
  • ✓ Check global logic setting (All vs Any)
  • ✓ Disable all filters and test search separately

Slow Performance

Problem: Filtering is slow or laggy.

Solutions:
  • ✓ Increase search debounce delay (500ms+)
  • ✓ Disable post count on large enum filters
  • ✓ Limit search fields to essential ones
  • ✓ Consider pagination for large collections

URL Sync (Experimental)

Note: URL synchronization is currently experimental and not recommended for production use. It's commented out in the current version.

Future versions will support syncing filter state to URL parameters for shareable links:

🔮 Planned Feature

In future CMSCollection property panel:

  • URL Sync: On
  • URL Prefix: 'products'
  • Example URL: ?products_s=laptop&products_f=category:electronics

Benefits:

  • • Shareable filter states
  • • Browser back/forward support
  • • Bookmark filtered views

Custom Empty States

For advanced empty state designs, use the Empty State slot:

  1. Design your custom empty state component in Framer
  2. Connect it to CMSCollection's "Empty State" slot
  3. Add custom messaging, images, or CTAs

Custom empty state with illustration and CTA

Custom empty state component connected to slot

Integration with Other Components

With Framer Motion

Combine with Framer Motion for animated filter results:

  • Add appear animations to CMS Items
  • Stagger animations for grid layouts
  • Transition between filtered states

With Code Components

Advanced users can access filter state in custom code components. This requires developer knowledge and is beyond typical no-code usage.

For most users, the built-in components provide everything needed. Code integration is optional for advanced customization.