CMS Filters

Hello! 👋

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Interactions
CMS
Boosters

CMS Filters

Use Refokus CMS Filters to create one or more filter sets (also possible as individual CMS Collections) to filter results on a CMS collection list.

[.c-title-3-primary]How to add CMS filters in Webflow?[.c-title-3-primary]

Use this Refokus Tool to create one or more filter sets (also possible as individual CMS Collections) to filter results on a CMS collection list.

The filters are based on the core form elements (Input, Dropdown, Checkbox, and Radio Buttons) with which you can create any type of filtering UI, such as toggles, tags, tabs, switches, and anything else you can visually imagine!

Additionally, the input element can be used to create live search filtering results on the collection item.

Step #1

Copy the

CMS Filters

<script> and paste it before the </body> of your page

Copy Script Code
<script
src=
"
https://tools.refokus.com/cms-filter/bundle.v1.5.0.js
"
></script>
<script src="https://tools.refokus.com/cms-filter/bundle.v1.5.0.js"></script>
Copy Text to Clipboard
Copied!
Step #2

Set Custom Attributes

Everything is made using custom attributes, so when we say “Add” that means "Add a custom attribute”.
Learn more
anchor link
Connecting the Collection List
anchor link
Identify the elements you want to be 'Filtered' by
anchor link
Connect the Filters Triggers
anchor link
Custom Value Filters
anchor link
Adding a Search Input
anchor link
Additive Filters
anchor link
Adding a Range Slider
anchor link
Adding a Pagination
anchor link
Adding an Empty State
anchor link
Editing Text in Checkboxes
General Notes
Step #3

Publish your site to the staging domain to test the tool is working.

Clonable Demo

Publish your site to the staging domain to test the tool is working.

Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback
Share on LinkedInShare on TwitterShare via URL
Other Webflow tools you might be interested in
Back to directory
CMS Load More
Extend Webflow’s pagination adding a Load More Button on your CMS lists.
Link to tool
CMS Prev/Next
Show the next and previous CMS collection items.
Link to tool
CMS Tabs
Create powerful tabs where the tab menu and content are managed from a CMS.
Link to tool