(2022) Webflow CMS Complex Filter Walkthrough - No-Code Attributes

In this video, we learn how to build a Complex Filter in Webflow. We'll go step-by-step & implement Attributes in your Webflow project. We'll use demo data, build the UI, implement Complex Filter the data. This demo site is for one of our enterprise clients at Finsweet.

TIMESTAMPS:
00:08 - Intro
00:44 - Live Example
09:13 - Use Form Elements
10:22 - Add Form Elements to the page
13:59 - Connect Checkbox
18:01 - Add Search option
22:08 - Enable multiple items search
23:47 - Search for all CMS fields option
25:17 - Add Filter-by Checkbox
28:42 - Add Filter-by Radio buttons
35:07 - Add Filter-by Dropdown
39:16 - Multiple Filtering
40:01 - Add Reset All option
42:22 - Add category-specific Reset button
45:55 - Add Active Tags feature
52:38 - Add the category to the Active Tags
54:36 - Remove Flashing from the content
55:48 - Add Attributes to the correct elements
58:15 - Add items count
01:00:56 - Using CMS Load to break the 100 items limit
01:04:00 - Important requirements for applying CMS Load
01:04:57 - Add Pagination Option to the Collection List
01:11:48 - Advanced Pagination Features
01:12:20 - Create page button template
01:16:20 - Customize the number of page buttons to show
01:22:26 - Summary
01:23:34 - Thank You

ATTRIBUTES: Add advanced features to your Webflow project without code. Attributes is the new way to implement @Finsweet into your @Webflowproject.

See all videos from the playlist: https://www.youtube.com/playlist?list=PLpjTM82q4Gu7qm-liDD62iIdD0LKSsFL7

-----------------------------------------------

// RESOURCES FROM THE VIDEO

Attributes: https://finsweet.com/attributes
Live Example - CMS Filter: https://cms-filter-example.webflow.io/

Get help with implementation: [email protected]
Subscribe to Finsweet: https://www.youtube.com/c/Finsweet?sub_confirmation=1

-----------------------------------------------

// ABOUT US

We’re Finsweet - a Webflow enterprise partner, badass product creator, and educational content powerhouse. We are taking Webflow to a new level and sharing everything with you along the way!

? Join our community - https://finsweet.com/fin-pro
? Shop our merch store - https://finsweet.com/merch
? Superpowers for your Webflow website - https://finsweet.com/attributes
? Your toolkit for Webflow - https://finsweet.com/extension

-----------------------------------------------

// SOCIAL

Facebook: https://www.facebook.com/thatsfinsweet/
Twitter: https://twitter.com/thatsfinsweet
Instagram: https://www.instagram.com/thatsfinsweet/
Dribbble: https://dribbble.com/thatsfinsweet
Behance: https://www.behance.net/thatsfinsweet/
Webflow: https://webflow.com/team/Finsweet/

-----------------------------------------------

// TAGS

#webflow #attributes #filter

-----------------------------------------------

Thanks for your support! ?