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

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

// RESOURCES FROM THE VIDEO

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

// 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!

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

// SOCIAL

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

// TAGS

#webflow #attributes #filter

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

Thanks for your support! 🤟

[rorym]

Even in 2024, this is the best webflow tutorial I have watched, thanks Joe & Finsweet!

[conafam]

I consider this an official Webflow release, that’s how good it is. I can’t thank you all enough!

[darshanvyas]

I cannot even express how grateful I'm to the Finsweet team for all these amazing functionalities. I could have never achieved what I did without the high quality tools and content that you guys provide. Thank you so much guys.

[thekyser]

"Come on Designer!" Joe really gets frustrated when things don't work as they should. Joe really gets frustrated when things don't work as they should. It must be because of that focus that Joe puts in that Finnsweet has such incredible products! Don't stop! This is amazing!

[MarkFaamaoni]

This is just brilliant. This will save us so much time...and money!

Thank you, Finsweet team!!!

[derekrungsea]

this blows CMS library filter and pagination out of the water!!! amazing guys, thanks for all the hard work! im sure you know its greatly appreciated!

[squidux]

Wow! Thanks for showing the whole steps like adding a new search element to the existing page was so helpful to see. Also the clonable helps answer other questions of how all this should be structured within the form block.

[salzundlicht]

I just love you guys. The cms-filter is such a joy to use - and it just works. Could you guys please take over webflow? I cannot imagine what your team would be able to build with the resources of webflow. Or even better - you could lunch your own web-builder-cms alternative? Heck I'd switch to a finsweet CMS-Web builder with no questions asked.

[RocknRollCEO]

Only just had time to watch this tutorial from scratch. Awesome as always. And the accents for NJ and NY didn't go unnoticed 😂.

[josephgraham]

I've been at it with the mighty and powerful Webflow since 2018 and this is the most powerful thing I've learned. Cheers, Finsweet!

[timothysolly]

Raw and unfiltered content! Thank you so much for letting me decide for myself how much detail I do or do not want to sit through!!! I didn't scrub through a single second, and I hope you make all your walkthroughs like this one!

[shaimoomnewaz]

Diligent. Patient. Inspirational. Invaluable. You’re all that and more Joe + Finsweet.

[manni-io]

I am now officially a Attributes maxi - thank you for the great breakdown!

[miqdamsajid]

You guys really are changing the economic game for a lot of people...love this no-code ecosystem
although it is powered by the code itself

[evgheniliuft]

wow.. this is the best filter solution I've seen, for the Webflow!

[jacobajay]

Very very important video on complex filtering in webflow.! Thanks very much @finsweet ! Much appreciated. Cant thank enough haha !!!

[MM-binj]

This is just brilliant. This will save us so much time...and money!
Thank you, Finsweet team!!😍😍😍😍😍

[nirubansatchithanandakumar]

I was struggling with filtering not working with pagination. So Glad I watched this.

What's mindboggling is how this is not baked into webflow.

[Gustavoandrighetto]

Thank you so much for your effort on putting this out. Great resources and training!

[ZWlify]

Absolutely game changer! Thanks for providing these tools!