How do you add CMS Filters in Webflow?

[.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>

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

General Notes

Step #3

CMS Filters

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

Copy the

CMS Filters

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

Set Custom Attributes

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.

Got a project? Let's talk!

Join the Team