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

[@conafam]

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

[@Finsweet]

It does provide huge benefit to Webflow users, but definitely not an Official Webflow release.

[@rorym8543]

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

[@cristina.aytecdigital]

Hi guys, it's amazing how powerful and easy to implement your solutions are!! 🔥We already work with a number of them on our projects, thank you so much! There's just one thing we didn't achieve yet: search by date range. I understand that 3 attributes need to be set on each filter-fields and collection-fields relating to the "from" and "to" dates: field identifier, filter type and range, right? However, we didn't succeed yet! Is there any specific tutorial on this topic? 🙏

[@and2good2]

Really nice tools guys! Fantastic work! One thing I can't seem to find an explaining for in this video or in the documentation is having multiple category item to select like you show in your documentation. In your documentation you show it is possible to select different categories like "Park", "Paid tour" etc, but you have seem to forget to show how to implement it? Or am I completely missing something obvious? xD

[@timothysolly4689]

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!

[@Finsweet]

Thank you Timothy. 🙏🏼

[@Nchitayat]

Does this work if you have more than 100 items in your collection? I'm concerned that since it's filtering on the actual page and not the collection, it won't include the items that are on the second page of my collection.

[@bramdoe3303]

Can you please set up the chapters for this? Would make it much easier to navigate

[@Yellow_Duck777]

How to do it in ecommerce webflow? I can't create many collections in ecommerce! .

[@turbolike7]

Does the fs-cmsfilter-field work for a multi-reference field? I can get it to work for a single but not multi.

[@joekrug8980]

Hi Kyle, yes this does work with multi-reference. What is not working about it? Is it a native Webflow nested collection?

[@pepfs]

FYI but CMS Combine and CMS Load does not seem to work together to properly break the 100 item limit. It only breaks the 100 CMS limit on the first database, not on the second. So e.g. if you have 150 authors writing 1000 articles total, and you want to combine them, and you put the author database first: you would get 150 authors (broke the CMS limit) + 100 articles (did not break the CMS limit). Respectively if you were to put the articles database first you would get 1000 + 100, breaking the first limit but not the second. Is there a workaround for this?

[@-haso]

Has anyone found a solution for this?

[@Reapertips]

I just noticed the page you are at doesn't get loaded into the URL query, so when you click on an article and then go back, it will take you to the first page. This would be terrible for a user :( - I tried adding "Show Query" and it only adds the filters but not the page you are at.

[@Reapertips]

Update: I added attribute "Query Parameters" - which adds pagination query parameters like this “?4f82d9d6_page=2.” And it works great when there’s no active filters. If you are at page 20 and click on a blog post, it will go back to the same spot. Great! However, when you start adding filters, the URL seems good. But when you go to a post then go back, it will go to page 1. I believe cause It’s sort of still loading everything? Not sure. Is there anything I can do? I want users to not lose their filters and page numbers when they go back. That’s all I need for good experience.

[@EljPhotoyt]

can someone please help me with the search bar I followed all steps but it doesn't work for me

[@sharonkhalo]

Me too

[@artificiallyintelligenthumans]

This is awesome, Joe. New subscriber here!! Is it possible to filter if the items for the same collection are set up in different grids? Since they're all from the same collection, would the filter read each collection individually to find the right tags/labels and only show those on the screen, no matter what collection grid they're in? Or do all of the items need to be in the same collection grid in order for the filter to work? I hope I'm making sense...

[@darshanvyas2535]

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.

[@JordanStambaugh1]

sooo for some reason using the asterisk on the Search CMS filter doesn't work. Also specifying "Name" or any other CMS field doesn't seem to work either. Interestingly the search only works for one of my CMS fields...not the others. Any ideas?

[@jaimealbertoortizlozano5708]

Where is the "Sort By" video? :)

[@jaroslavdlask]

I created a couple of filters on different projects and it works just great! I was just wondering if there is an option to show results only if all filters are selected. I work on a project where we want users to first choose all filters and then we display only one result that matches what they selected. Thnaks!

[@magalere]

Hey Joe, love it! Question: is it possible to integrate it with Google Maps? I’m building a filter system where visitors can filter a location by street name. Not sure though how to build it yet in combination with your great Filter resource. Have you done something like that before? Any recommendations? Thanks!!

[@joekrug8980]

Hey! We are going to release a developer api for Attributes next year. This is going to allow you to write code on top of Attributes for implementations exactly like this!

[@Morkvitalja]

Love the simplicity ❤ However I can't get highlighting a searched term to work. Searching works and I've applied the [...highlight="true"] to the search field attributes. I looked at the cloneable and it looks the same. Anyone got any suggestions?

[@ItsKwamzilla]

Does CMS Attributes have anything for working with Google Maps? e.g. Being able to search by Zip code and moving the map to show pins?

[@davidprioul]

Is it possible to filter with UI Filters other than those of the Form Block (Checkboxes, Radio Buttons…) but UI Filters like Text Block, Buttons ? 💪

[@schaffan]

Same question here!

[@joekrug8980]

Hey David, no this is not possible and will not be possible! We have decided to go 100% form for Attributes CMS Filter. This is the most professional enterprise-ready solution.

[@thevectorbox]

One thing you can do is use mirror click from button to checkbox somehow, I am planning to apply this in my next project, lets see how it goes

[@OmerAviram]

Hey, is it possible to make a single radio button label to have multiple values to filter? E.G. - a radio button with a label "Shirts, Pants" -> apply filter for "Shirts" + "Pants" text on the cms item Thanks!

[@MarkFaamaoni]

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

[@Finsweet]

Glad you like it. Let us know what you would like to see us build next.

[@growthbranding]

Hello guys! Would be anyway to select items and add to a list for a quote, kind of Ecommerce but with not buying option, just request a quote or information of all product selected. Any way to do it? Thanks a lot!

[@miqdamsajid875]

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

[@joekrug8980]

Thank you Miqdam!!! Really appreciate that

[@jennifersanjines1111]

OK #1 I RE-implemented everything on my current site I'm building that had used finsweet tools with the new Attributes in under a few hours and It was so easy!!! I love it so much. Question on this video though, you mention "there is no delay" when it filters, is there a way we can add a delay so that the content fades or animates in? In my case multiple items I click still load the first result and it's not very clear to the user that the filter is working.

[@joekrug8980]

Hey Jennifer! Great to hear this. You can adjust the duration the filer duration in ms. The example right now is set at 0. I've just changed to it to 50 to show the fade effect: cms-filter-example.webflow.io/. On your Collection List, find the attribute fs-cmsfilter-duration = 0 and change that to 50, 100, 200, or whatever!

[@DjSoulsaver]

Awaiting the clonable implatiently however absolute stellar job at creating something that was missing, surely the webflow team is extatic too. You've truely found your niche, going to kill it moving forward no doubt. WIll be hopefully implementing the attributes ones I get the grasp in multiple projects. F'in Sweet.

[@Finsweet]

Is this the cloneable you are looking for? webflow.com/website/CMS-Filter-Example-by-Attributes

[@jacobajay7804]

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

[@CH-yb2vi]

How did you get 2 collection lists inside the vehicle cards without using Nest? i.e. how did you get "make" and "fuel type"? I keep getting an error.

[@sambeushausen4975]

Does anyone know if we can use dropdowns for partial matches? For example: dropdown item has value of "blue" and the field that it's targeting has a value of "blue, green, red". Using the directions in the video, it would only return an item with an exact match for "blue", but I'd want it to return anything that includes that value as well :) Thanks in advance!

[@evgheniliuft]

That's a good question! I am trying to filter content on my site and one project could have 2 values, I'd like it to be displayed when any of the criteria is met

[@MohammadaAprilianto]

does webflow have like a sandbox mode so i can try the custom code, before i subscribe the webflow?

[@yzencreiper5633]

Hello, someone could be explain how fix the problem with several items into the search bar. In this example, he uses the Year as item, but imagine he decides to use Year + brand => doesn't work anymore

[@goldenant9450]

having issues? DELETE THE SUBMIT BUTTON!!!! I was troubleshooting for a couple hours...duplicating the cloneable to try different pieces, building from scratch, trying different pages....then i deleted the submit button. voilà

[@davidnathan5199]

Hopefully, someone can help me with this question soon. Why is he using different CMS collections instead of a single one? This makes the regular data import more difficult. Can this filter also be implemented if only one CMS collection is used? (i.e., filtering by different fields from this collection) Thanks for your answers!

[@supersonic.a]

Was it explained here how to design an empty state? I've been using attributes to do that in my own project, created div that should be shown when 'no results found', applied name and value to it. But it only appears when the div is actually visible on the page. When I put display to 'None' or choose 'Hidden', it doesn't appear. Please advise what can be done to make it work properly.

[@AndreyBest2010]

@Finsweet Hi guys. I noticed an issue with [fs-cmsload-mode=pagination] + [fs-cmsload-pageboundary=0] I setted [fs-cmsload-pageboundary=1,1,1,0] to fit pagination on mobile. But I get the wrong order of the page when I go from the third page to the second page. I send this issue on your support email 2 weeks ago with video and links on my project but haven't got answer yet(

[@lasloandriessen-kz8wf]

Hey! All clear thanks.. except for the following. I've created a dropdown in my collection items, lets say 4 categories: Marketing, Production, Transportation and Logistics. Every vacancy has one of these sectors added to it. When I create the filter and bind one of the filter fields to the sector, I don't get 4 filter sectors. I get 10 times marketing, 4 times Production etc.. Because multiple vacancies have the same sector. How do I solve this?

[@tre-dm]

This filter works but there is one trick.... if you have 1000 products and you put by 10 on page so you have 100 pages, your filter works just on first page.

[@FestieBestieHydration]

I find that as I filter across multiple cms collections (e.g. year AND Make) I will create an exclusive filter that limits the results when I really just want to have a multi filter where anything they are interested in shows. Can you please give me some advice as to how to modify to create a multi filter?

[@jgustafe]

Question, When I connect my checkbox text to my desired CMS label, it's coming up with like 10-12 of the same label title instead of just one of each in the group. Can anyone help me figure out why this is happening?

[@derekrungsea4051]

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!

[@Finsweet]

Thank you for the support Derek

[@joekrug8980]

Thank you Derek! Really appreciate this!

[@juan_carrea]

Hi! How can I set a disabled checkbox? Ex.: I clicked Toyota but there are no options available in "Gasoline" fuel type so I'd like to disable that checkbox (the user can't click on "Gasoline"). I'd like to show Gasoline checkbox but in disable status.

[@kristinarudolf2187]

I have big problems to implement this filter. But i really want to use it so much... In my case, I cant use the filter because my CMS filters are not visible to choose (brands, locations ect..) it only shows the main CMS (cars) - how can I solve it? Heeeelp pleaaaseee :((

[@vitaliy.sokurenko]

I found a bug (error) in cms-load!!! Popups are not called after clicking on the "MORE" button, I connected the cms-load module.

[@octacreative2763]

Hey, can you do a tutorial on the range slider! Please!

[@joekrug8980]

Yes! Working on it. Go ahead and copy more examples from Finsweet Extension. Is there anything specific you would like covered?

[@vince10nats]

Amazing, been waiting for this from you guys. Super excited to try it out! Does this work with eCommerce CMS?

[@joekrug8980]

Hey Vincent! Yes, it does! Let us know what you think

[@yo_skelly]

Amazing video. Used this to build out a browse experience on my site. Any tips on how to make a collection list + filters on mobile? This doesn't scale well on smaller screens. Thinking to nest the filters UI list within a sidebar but can't figure out how to do that if you have any tips!

[@-haso]

Anyone figure out how to get the checkbox filters when over 100 items to load and function? Using render-all or infinite loads 101+ but when you click on them nothing happens and they don’t filter.

[@konstantinbodnenko5842]

Could we use your great cms searching system to search the data that store inside webflow cms template page?

[@denniszenanywhere]

I spoke too soon about how I thought the filter was easy, I could not even make the first filter, Make, work no matter how much I follow the instructions. Has anyone also found that Make attributes do not work? I already spent 6 hours on just the Make filter. Anyone figured this out?

[@KaneGarland]

Did you guys temp remove the pagination from the attributes? Cool if so… but otherwise Im losing my mind!

[@joekrug8980]

No we did not! I don't know if I understand the question. Pagination is an option inside CMS Load!

[@KaneGarland]

Yes sorry, turns out it was in the ‘options’ section below. Sorry! Just couldn’t find it ❤️ thanks!!!!

[@nicolestolz1112]

I tried to implement the filter as described in the documentation. unfortunately it doesn't work. Although everything is set up as needed. Can anybody help?

[@ansabkhan9857]

Is it possible to rearrange collection items on website using GSAP flip while using CMS filtering from finsweet no-code attributes?

[@angelescrestink]

I don't understand why this won't work. I've gotten this to work before, on one page, now I'm trying to create another page that needs filtering and now it's not working. I've set it up the same as before, from what I can see. I'v even gone in to the first page and broken it, then fixed it, several different ways to see what could be wrong with the new page and I can't find a solution. Why is this so simple, yet so easy to screw up?

[@nocodehero]

You didn't created the range slider i have seen your video of range slider but i am confused how i can link that with the cms list

[@TheAlex12341]

Am I the only one who is completely fascinated by this, building it all and when the site is published and I press the checkbox nothing works? 😄

[@codegod7109]

love it but theres a pagination bug when combined with filter, When clicking the item on page 2 and than navigating back the page count resets to 1. Dealbreaker for eshop. tried to contact support but they said its normal behavior which isnt.

[@marvinkr]

How do you do the price range ? Curious.

[@joekrug8980]

Tutorial of Range Slider setup is coming this week. This will walk through how to set up Range Slider with from and to fields

[@Gustavoandrighetto]

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

[@thewebart]

Thank you! Love this. BTW: Awesome intro music!

[@Finsweet]

Glad you like it. thank you.

[@VladCristeaYT]

Hi, this is very very helpful, thank you. Is there a way I can make the search run only is you "hit enter"? Or maybe to add a little load time?

[@visiontech69]

How to apply search filter on the next tab? Main Tab search filter is working but on the next tab search filter is not working.

[@RonWebDev0188]

This is amazing! Just what I need. I got stuck in one of the filtering and would like to chat. Which method is best to contact and share?

[@brendanryder5726]

When I have multiple items of the same category it just duplicates them in the checkbox area, what am I missing?

[@ClairolZamSalazar]

Hey this is really helpful video! Wondering is it possible to have a checkbox in dropdown?

[@darrylum]

This has been really helpful! Does this also work with Weglot or the new Webflow Lokalization? If anyone has tested it

[@simonsjodin2104]

Hey, when I use the pagination attribute the second page hides my CMS items, why is this? Help appreciated

[@nocodekevin]

Anyone have a walkthrough of adding URL parameters to this?

[@joekrug8980]

Hey Kevin, please add "fs-cmsfilter-showquery = true" to the Collection List you want to filter. Query params will work!

[@albertfranklin2317]

You guys are the best!! Amazing job here. I've just got a combo: the power of Attributes and a cms framework for a project which deadline is in January and that I've not started... yet. Now I know. Thanks again @Finsweet.

[@joekrug8980]

Awesome Albert! This is great to hear. Thank you for the great comment.

[@frajack]

Hi! Can you help? I'm trying to replicate this, I found your tutorial amazing, but I've got a issue: when I create the first checkbox UI filter element, a voice repeats itself as many time as it has a match in the collection list to be filteres. Eg: You have 4 Toyota among your cars? I see Toyota repeated 4 times in the checkbox 🥲 please help

[@javierbarreda9357]

Amazing, thanks! Just a question, how were you able to display multiple CMS collection lists(make, location, fuel type) inside your main CMS collection list (cars)?

[@kristinarudolf2187]

In my case, it doesn't work.. :( This filter is so cool but I have the same problem.

[@AnjuliStudioJunk]

This is pretty cool! Is it possible to do combine two 2 CMS collections into a complex CMS filter?

[@digitalmadaari6935]

hey @finsweet do you know why my filter is getting applied on 1280 px but not any other size px

[@olechristianerichsen7440]

I have question about the year field. You are manualy setting theese. But i want it to be automatic, so the client dosent have to add a new year, every year?

[@ZWlify]

Absolutely game changer! Thanks for providing these tools!

[@Finsweet]

You are most welcome. Thanks for hanging on the stream with us!

[@erickmuller]

where can I get the clone for this? So the whole page is inside of the form? Is that how it has to be?

[@joekrug8980]

Hey Erick! Here is the cloneable: www.finsweet.com/attributes-cms-filter-cloneable . The whole page doesn't have to be in the form but it can. All of the Filter UI elements must be in the form. That's the only rule

[@charles6685]

I'm gonna play with this! Damn, it opens up so many possibilities! Mad lad

[@Finsweet]

This is just the beginning. Let us know if you get any ideas. Finsweet.com/vote

[@lukawalli]

Amazing tools, so easy to use, brilliant. Can't wait to try this. Thank you so much! 🙏

[@Finsweet]

Let us know what you build with it

[@schaffan]

Great update! Thank you for your dedication. Quick question: Can the module be modified so that the CMS list is not shown at the initial state? Also, regarding the filtering buttons, can this be set so that only one button can be selected at a time? Again, thank you for you and your team to bring this to the community.

[@joekrug8980]

Hey Andras. To select only one button at a time, use radio buttons! By default this element can only be selected one at a time. Works the same way in the filter system. We have had several requests for the list to start empty. It's on radar for a feature addition

[@schaffan]

Thank you Joe for your answers. Great work.

[@sebobastiseppobas]

And one more thing: If you use Javascript in your list elements, it will only be loaded/rendered on elements that are visible initally. JS is not loaded/rendered on elements that become visible through CMS Load or CMS Filter. But this can be fixed, because Jetboost had this problem at the beginning too. Probably there must be some kind of command that reloads all scripts every time a filter, search or load function is used.

[@baltazarfajto]

Just found out this the hard way...

[@lennyhe2762]

It helps me a lot! Thank you Team for this amazing work!

[@RossCuyler]

This may be a silly question but how do you get it to update without clicking search?

[@michaelsausen889]

How is this all free??? Thank you so much! So much good info here.

[@MM-bi9nj]

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

[@Finsweet]

🙌🏽- Happy to give back to the community

[@atrixstic]

I know this works. It's an F'insweet product. But I've exhausted everything just for a simple CMS filter and yet it is not working for me. Can I get some support please?

[@realguitarshredder]

umm I have filtered the optionfield to a collection list (city, genre of music) and its working but the I have added the same collection in the same page at a different place for featured shows but when I put the same attribute to the new collection its not working. So the same optionfield filtering two collection list but both the collection are same. Do I have to something extra or am I missing something.

[@juan_carrea]

How can I apply progressive filters?

[@edelprojects8308]

thank you

[@OmerAviram]

Hey, I implemented the "pagination" mode and it works very good! But - I have an elemnet trigger interactions on the CMS items which only displayed on the first group of the pagination... how can I resolve it?

[@kdcan724cnls4]

This is GOLD, well done thanks Guys!

[@Finsweet]

😎🚀

[@juanroque6459]

Love the content and how RAW they're delivered, but I do have ONE REQUEST. Can y'all add CHAPTERS to your videos so we can navigate to the content that's important to us? Y'all cover a lot in this video WHICH I LOVE, but I'm specifically looking for the CMS Load discussion and how to implement with CMS Filter. *BTW* - I just built a website that I never thought I'd be able to by using Attributes. Super easy to learn and implement!! THANK YOU!!!

[@conorscott8330]

My filter has stopped functioning over the past week. I have tried to go through the steps again but no data has changed from when it was working. Has there been a change to the code? I can no longer copy the script to add in the Header from the Finsweet website. Up until now this has been a huge help and hoping I can get to the bottom of this bug. Thanks!

[@mariarus0]

It is not working nither on Finsweet webpage... Maybe some webflow change?

[@gemymohamed734]

Hi dear, I tried to copy script but i can't do this with no reason

[@SebastianOlesko]

This is amazing, many thanks. *But how* on earth did you manage to get a *multi-reference* field into the list-item ( *Fuel Type* )??????? Any insight on this would be highly highly highly appreciated :)

[@angushyams244]

did you work this out?

[@lg8159]

In collection setting add the field reference (single or multiple). And, creating a new cms collection where you will add the new reference. Go back to the first collection list, and now you can connect with the new reference collection. Hope this helps.

[@webbado]

Wow! Thank you so much for this video and all the effort you guys put in to help the Webflow community. :)

[@groove_bureau]

Hello. How to create a filter by choosing from dropdown('category") then dropdown("location") and then pushing "submit" button that will redirect to the results page? Who has any ideas? Thank you

[@salzundlicht513]

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.

[@AffinityPhoto]

Is there a way to disable checkboxes for Collection Items that do not exist in the filter results? IE: The moment you select "TESLA", the Fuel Type: Gasoline is irrelevant. Clicking "gasoline" will always result in 0 results. Likewise, choosing "Mazda" should gray out the "electric" option. I want to prevent customers from hitting these dead ends.

[@aldanaprosperi9485]

Absolutely amazing... thank you so much for this! @finsweet Do you think it is possible to make the selector options be completed automatically depending on the cards that you have, and not completing them one by one manually? For example: if there is no car from the year 2021, it does not appear and then when theres is a new car from 2021, you automatically have this new option ? Thank you very much !!

[@merylbenitah9383]

It's quite amazing ! Thank you so much to offer us a such tutorial