Getting Started

Add professional filtering to your CMS collection in 5 minutes. No variants, no conditional visibility rules - just install via plugin or copy from dashboard.

5 Minutes SetupvsHours of Variants
This guide assumes you already have a CMS collection in your project. If you need help creating CMS collections, check out Framer's CMS course.

Two Ways to Add Components

Choose your preferred method to add components to your Framer project:

🔌 Method 1: Using Plugin

One-click insertion directly into your canvas with smart positioning

  • ✓ Instant one-click insertion
  • ✓ Auto-positions in parent frames
  • ✓ Browse all components in Framer

🌐 Method 2: From Dashboard

Copy URLs and paste directly in Framer (Ctrl+V)

  • ✓ Full browser experience
  • ✓ View documentation & demos
  • ✓ Purchase licenses directly

Step 1: Add & Connect CMS Collection

Get the foundation component and connect it to your CMS List:

Add the Component

Method 1: Using Plugin

  1. Install the Framer CMS Filter Plugin from the marketplace
  2. Open plugin in Framer (Plugins menu)
  3. Sign in with your framercmsfilter.com account
  4. Click "Insert" on CMS Collection

Method 2: From Dashboard

  1. Visit your dashboard
  2. Find "CMS Collection" and click "Copy URL"
  3. Return to Framer and paste (Ctrl+V or Cmd+V)

Connect Your CMS List

  1. Select the CMS Collection component - Click on the component you just added
  2. Open property panel - Look for the "CMS List" property
  3. Connect your CMS List - Drag your existing CMS List component into the "CMS List" slot
  4. Done! - Your collection is now ready for filtering
Important: CMS Collection must have a CMS List connected to work. Without this connection, filtering won't function.

Step 2: Add Search (Optional)

Let users search through Text fields like Title, Description, etc:

Choose your method:

  • Plugin: Click "Insert" on CMS Search component
  • Dashboard: Copy URL → Paste in Framer (Ctrl+V or Cmd+V)
  1. Add the component - Use plugin or dashboard to add CMS Search
  2. Position above your collection - Place where users expect search
  3. Choose search fields in properties - Select which Text fields to search

🔍 Searchable Field Types

  • Text: Title, Name, Description, etc.
  • Short Text: Category names, tags, etc.
  • ❌ Not searchable: Formatted Text (rich text), Images, Files

Step 3: Add Filters with Filter Builder

Add dropdown filters, price ranges, toggles, and more with one component:

Choose your method:

  • Plugin: Click "Insert" on CMS Filters component
  • Dashboard: Copy URL → Paste in Framer (Ctrl+V or Cmd+V)
  1. Add the component - Use plugin or dashboard to add CMS Filters
  2. Position in your sidebar or above collection - Place where filters make sense
  3. Add filters in properties panel - Click "+" to add each filter you want
  4. Configure each filter - Select the CMS field, choose filter type, and customize options

Filter Types for Each Field Type

📋 Option Fields

Category, Status, Type, etc.

  • • Dropdown (single or multi-select)
  • • Checkboxes
  • • Button tags

🔢 Number Fields

Price, Rating, Quantity, etc.

  • • Range slider (min/max)
  • • Number input
  • • Dropdown ranges

🎛️ Toggle Fields

Featured, Available, Published, etc.

  • • Toggle switch
  • • Radio buttons (All/Yes/No)
  • • Checkbox
Need more advanced filter configurations? Check out our detailed Filter Builder guide.

Step 4: Style to Match Your Project

Every component uses Framer's standard styling controls - no code needed:

🎨 Standard Framer Styling

Colors, fonts, spacing, borders - everything works exactly like native Framer components. Style in the property panel like you always do.

  • Colors: Background, text, borders, hover states
  • Typography: Font family, size, weight, line height
  • Layout: Padding, margins, spacing, alignment
  • Effects: Shadows, blur, borders, corner radius

🚀 Quick Start with Remix

Want to see it working immediately? Use our remix links:

⚡ Instant Setup

  1. Visit your dashboard - Find the "Remix Projects" section
  2. Click any remix link - Opens a working example in Framer
  3. Replace with your CMS - Swap the demo collection with yours
  4. Done! - Filtering works with your content immediately

🛍️ E-commerce Store Demo

Complete product filtering with search, category filters, price ranges, and more

Perfect for: Online stores, product catalogs, marketplace sites

🏠 Real Estate Demo

Property filtering with location, price, bedrooms, bathrooms, and features

Perfect for: Real estate sites, rental platforms, property listings

Remix projects give you working examples to learn from. Open the remix link, explore the setup, then replace the demo CMS with your own collection.

✅ You're Done!

Switch to Preview mode and test your filtering:

✅ Search finds the right results
✅ Filters narrow down content properly
✅ Multiple filters work together
✅ Everything looks good on mobile

🎉 Professional Filtering Complete!

Your CMS collection now has the same filtering capabilities as major e-commerce sites - no variants, no headaches, just professional results.

Need Help?

🎯 Individual Component Guides

Detailed guides for search, each filter type, and styling options

💡 Complete Examples

See full filtering setups for different industries and use cases

⚙️ Advanced Filter Builder

Master complex filtering logic and advanced configurations

💬 Get Support

Stuck on your specific setup? We're here to help you succeed