CMS Collection

The foundation component that makes filtering work. Your existing CMS List goes inside this component, and all search and filters automatically apply to it.

Required Component: CMS Collection is required for filtering to work. All other components automatically connect to it.

How It Works

CMS Collection wraps your existing Framer CMS List and makes it filterable. When users search or apply filters, this component instantly updates what shows in your collection - just like major e-commerce sites.

It handles everything automatically: empty states when no results match, dynamic styling, and works with all your existing CMS List designs.

Your existing CMS List sits inside the CMS Collection component

What It Does

  • Makes your CMS List filterable and searchable
  • Shows "no results found" when filters don't match anything
  • Works with any existing CMS List design
  • Automatically connects with search and filter components
  • Supports all CMS field types
  • Mobile-responsive by default

Setup Steps

  1. Copy from dashboard: Find "CMS Collection" and click copy
  2. Paste in Framer: Add it anywhere on your canvas
  3. Move your CMS List: Cut your existing CMS List (⌘+X) and paste it into the "Collection" slot
  4. Done! Your collection is now ready for search and filters

Property Panel Settings

The property panel has simple settings you can adjust:

  • Collection: Your CMS collection (auto-detected)
  • Empty message: What to show when no results match (default: "No items found")
  • Show empty state: Toggle on/off the empty message