Guide
- Filtering
- CMS
Guide
- Filtering
- CMS
Guide
- Filtering
- CMS
How to Create Filtering for Your Framer CMS
Learn how to add simple, no-code filtering to your Framer CMS collections. In this blog I’ll walk you through setting up filter buttons, creating component variants, and connecting them to your CMS collection—so visitors can instantly sort your content by category with a single click. Perfect for portfolios, blogs, or product showcases.
Posted by
Nandi
Table of contents
Set up your filter buttons
Start by creating a row of buttons that users can click to switch between categories. You’ll want an All button (to show everything by default), and then one button for each category in your CMS.
For example, if your CMS has categories like Product Design and Art Direction, create buttons for each of those.
Set up your filter buttons
Start by creating a row of buttons that users can click to switch between categories. You’ll want an All button (to show everything by default), and then one button for each category in your CMS.
For example, if your CMS has categories like Product Design and Art Direction, create buttons for each of those.
Set up your filter buttons
Start by creating a row of buttons that users can click to switch between categories. You’ll want an All button (to show everything by default), and then one button for each category in your CMS.
For example, if your CMS has categories like Product Design and Art Direction, create buttons for each of those.
CMS category buttons.
CMS category buttons.
CMS category buttons.
Add your CMS collection
Below the buttons, insert a CMS collection frame that pulls items from your CMS. In this case, let’s say you’re sourcing from a collection called Work. Right now, this shows all your items, no filtering yet. But that’s about to change.
Wrap everything in a component
To connect the filter buttons to the collection, you need to wrap them together.
Select the frame that holds both the buttons and the CMS collection, right-click, and choose Create Component. Let’s name this component work_section. Inside this component, you’ll set up variants that control which items are shown.
Create variants for each filter
Start with your default variant: All.
Then create a new variant called Product Design. In this variant:
Set the Product Design button to its “selected” state.
Select the CMS collection and apply a filter so it only shows items where the category equals Product Design.
Do the same for Art Direction (or any other categories you have). Each variant will contain the button styling plus a filter applied to the CMS collection.
Connect the buttons to the variants
Now for the magic. Go back to the primary variant, select a button (say Product Design), and use the connector to link it to the Product Design variant.
Repeat this for every button:
All → All variant
Product Design → Product Design variant
Art Direction → Art Direction variant
Preview the filter in action
That’s it. Hit preview and try clicking your buttons. You’ll see the CMS collection instantly filter based on the selected category. No custom code. No complicated setup. Just variants, filters, and a few clicks.
Add your CMS collection
Below the buttons, insert a CMS collection frame that pulls items from your CMS. In this case, let’s say you’re sourcing from a collection called Work. Right now, this shows all your items, no filtering yet. But that’s about to change.
Wrap everything in a component
To connect the filter buttons to the collection, you need to wrap them together.
Select the frame that holds both the buttons and the CMS collection, right-click, and choose Create Component. Let’s name this component work_section. Inside this component, you’ll set up variants that control which items are shown.
Create variants for each filter
Start with your default variant: All.
Then create a new variant called Product Design. In this variant:
Set the Product Design button to its “selected” state.
Select the CMS collection and apply a filter so it only shows items where the category equals Product Design.
Do the same for Art Direction (or any other categories you have). Each variant will contain the button styling plus a filter applied to the CMS collection.
Connect the buttons to the variants
Now for the magic. Go back to the primary variant, select a button (say Product Design), and use the connector to link it to the Product Design variant.
Repeat this for every button:
All → All variant
Product Design → Product Design variant
Art Direction → Art Direction variant
Preview the filter in action
That’s it. Hit preview and try clicking your buttons. You’ll see the CMS collection instantly filter based on the selected category. No custom code. No complicated setup. Just variants, filters, and a few clicks.
Add your CMS collection
Below the buttons, insert a CMS collection frame that pulls items from your CMS. In this case, let’s say you’re sourcing from a collection called Work. Right now, this shows all your items, no filtering yet. But that’s about to change.
Wrap everything in a component
To connect the filter buttons to the collection, you need to wrap them together.
Select the frame that holds both the buttons and the CMS collection, right-click, and choose Create Component. Let’s name this component work_section. Inside this component, you’ll set up variants that control which items are shown.
Create variants for each filter
Start with your default variant: All.
Then create a new variant called Product Design. In this variant:
Set the Product Design button to its “selected” state.
Select the CMS collection and apply a filter so it only shows items where the category equals Product Design.
Do the same for Art Direction (or any other categories you have). Each variant will contain the button styling plus a filter applied to the CMS collection.
Connect the buttons to the variants
Now for the magic. Go back to the primary variant, select a button (say Product Design), and use the connector to link it to the Product Design variant.
Repeat this for every button:
All → All variant
Product Design → Product Design variant
Art Direction → Art Direction variant
Preview the filter in action
That’s it. Hit preview and try clicking your buttons. You’ll see the CMS collection instantly filter based on the selected category. No custom code. No complicated setup. Just variants, filters, and a few clicks.
CMS filtering in action.
CMS filtering in action.
CMS filtering in action.
Wrapping up
Adding filtering to your CMS gives users more control and makes your site feel dynamic. Whether you’re showing off a portfolio, blog posts, or product listings, it’s a small detail that makes a big impact.
Wrapping up
Adding filtering to your CMS gives users more control and makes your site feel dynamic. Whether you’re showing off a portfolio, blog posts, or product listings, it’s a small detail that makes a big impact.
Wrapping up
Adding filtering to your CMS gives users more control and makes your site feel dynamic. Whether you’re showing off a portfolio, blog posts, or product listings, it’s a small detail that makes a big impact.
