CMS filtering on a collection list in Webflow with an 'All' button

[@thelazygod]

Part 2 video, styling the radio button, is live now! kzbin.info/www/bejne/o6ureGiArNZ1aK8

[@AliNawrozy]

Man I have a question, how can I do it, when a customer click on a Filter Button, and he wants pursue the filtering process to restrict more?

[@MahamudulHasanRipath-u7o]

Thanks, man, I watched both of your tutorials about CMS filtering & styling. I found them as a GEM. The most tricky tutorial I have ever seen.

[@kelly_browning]

DON'T CHANGE A THING!!! You're an EXCELLENT Webflow teacher. I instantly subbed! Thank you for this video and for taking the time to thoroughly explain what you were doing.

[@thelazygod]

Thank you so much for the kind words!

[@ufuomaorere2311]

Great video. It really helped me with my project, can you make the video for the styling, that would also go a long way

[@thelazygod]

Glad it helped! Will try to record that one today, so it should be live next week.

[@ufuomaorere2311]

@@thelazygod Thanks TLG, I look forward to it

[@thelazygod]

The new video is live now! kzbin.info/www/bejne/o6ureGiArNZ1aK8

[@justadesigner]

Brother, that's Wow 🤯🤯. You've saved me a ton of hours. Subscribed you, keep it up! 🤝

[@reemasingh883]

Best video. Can't explain how happy I'm to finally see this solution providers by someone which isn't complicated 🤩

[@jordan.g]

I've always struggled setting this up properly. Thanks for the tutorial!

[@thelazygod]

I feel you! I often forget one of the steps to get everything perfect. That's also why I left the wrong radio group in the video, since that's what I've messed up the most.

[@bowiejackson]

Amazing tutorial bro! I learnt a lot and you are so calmly explaining us, I love it!

[@macossa]

Thank you for this tutorial. I was giving up on the start checked (all button) functionality because the grouping is poorly explained on the Finsweet website. Thanks to you, I got it working. Great content. Keep it up 🤙 🔥

[@JustAztec]

Great video!, please make an tutorial on how you make the grid and boxes, its a so good style!!🔥

[@rhiannabd]

This is so smart! I was struggling for ages. Thank you

[@patshepherd5309]

Best overview of this!!! Finsweet need to hire you to do their overview videos 🤩

[@thelazygod]

Thank you! Maybe I should make some more guides on how I use the Finsweet Attributes 🤔

[@patshepherd5309]

@@thelazygod Just implemented CMS filters thanks to your video, thank you! My only question is how you format it for mobile stacking? I was hoping to make my buttons a little smaller on mobile and wrap them so that I end up with maybe the all button and two options on first line and then 2 or 3 on second line. However the all button seems to always sit on it's own line as it's not part of the collection list group. Any ideas on how you'd solve it? Cheers PAT

[@thelazygod]

Yeah, with this method the all button is not part of the same flexbox as the other buttons, which makes it a bit harder to get them in the same layout like that. That's why I went for a horizontal scroll on mobile in this video, but it could probably be done.

[@JonathanPatterson-x6d]

Great video! Super clear to understand. Very helpful. Hope you keep putting out content!

[@cosminrus6571]

I hope to see more of these videos, great job 🤜

[@thelazygod]

Thanks! There will be a lot more coming! 🔥

[@golfcartsguide]

Awesome Bro, You rocked 🔥

[@thelazygod]

Glad you found it helpful! 🔥

[@jamesmac7071]

Exactly what I was looking for, thank you

[@thelazygod]

Glad you found it helpful!

[@clark4089]

Great work, man!

[@gamalieljustinflores5109]

You are a magician sir.

[@thelazygod]

🧙‍♂️🪄

[@carolinanoir3260]

Great tutorial! Your explanaitions are very clear. I have an issue with the "All" button, it's not funcioning. When I click it, it shows nothing. What can I be doing wrong?

[@thelazygod]

It sounds like the filter can't find the hidden 'All' text in the collection items. You can check if it is added in the collection item. It may be case-sensitive, so you can also check if the 'All' text is written in the same way. It could also be the IDENTIFIER in the [fs-cmsfilter-field="IDENTIFIER"] attributes which are not matching between the filter elements and the text 'All' text in the collection item.

[@StephanieJBB]

Wonderful tutorial! This is exactly what I was looking for; however, I have one (potentially dumb) question. When I got the cloneable, none of the filter buttons worked. The hover animations all respond, but I can't get the images to filter by using the buttons. Is that normal for a cloneable? I just want to make sure I won't have the same problem if I try to implement this workaround on my own site. Thank you again!

[@thelazygod]

It should all be working in the cloneable you get exactly like the one you can see here cms-filter-all-styling.webflow.io/. Feel free to share a link or send me a DM on Twitter @justriziki if you want me to take a look 👀

[@ernalin7145]

LIFE SAVER! Thank you very much!

[@FloNocode]

Please ! That will be very helpful to understant how you make this CSS styling please ! Even if we can use clonable , its more satisfy to build himsel. If you can explain please

[@thelazygod]

Great point! I’ll definitely look into making a video about the styling that went into these components

[@santiagoramos9442]

Excellent tutorial. Thank you!

[@SuperHero-dq4jc]

Thanks for this. When you add additional posts, I guess you mark them with the "All" field. Correct? If so, you could have added an "All" category. But this was helpful!

[@thelazygod]

With the method I’ve shown here all existing and new posts will automatically appear in the “all” category in addition to their chosen category

[@gamalieljustinflores5109]

Love your work! Wanted to ask if there was a way to make the page scroll to the top as you press the radio button? I have the filter on the side as a sticky. Do I use java script?

[@thelazygod]

Thanks! You can use the built in ‘anchor scroll’ attribute which is a part of Finsweet CMS Filter finsweet.com/attributes/cms-filter Just add it to the element you want to scroll to when the filter is used 👌

[@zassdaniil]

Благодарю! Мне очень помогло! Буду смотреть тебе дальше!

[@Honeydesigns00]

awesome, thank you! any idea on how to make the radios wrap on mobile? since all is separate, the remaining radios dont align to the same axis on the left.

[@naeo]

I solved it by wrapping the "All" radio field and the collection list in a flex container with wrapping enabled. Then I added the following code to the page as an embed: #filters-form .w-dyn-list, #filters-form .w-dyn-items { display: contents; } This allows the child elements of .w-dyn-list and .w-dyn-items to participate directly in the flex container layout. #filters-form is the ID of my form containing the filters.

[@Honeydesigns00]

@@naeo thanks so much!! this worked like a charm.

[@naeo]

@Honeydesigns00 Great! 😀

[@munkaas]

Is it also possible to select multiple categories at the same time, with checkboxes for example? And reset with the 'All' button?

[@thelazygod]

Yeah you can do that. The setup is almost the same, but instead of radio buttons you would use checkboxes, since they allow multiple to be selected at the same time. Then I would probably just add a button called reset instead of the “all”. Finsweet has a specific attribute you can add on an element to define that it should reset the filter.

[@antonmostert7469]

I've watched a few CMS filter videos and this one was really good. Shows all the steps without wasting time. Only thing is your voice is a little difficult to hear clearly.

[@thelazygod]

Thanks! I'll see what I can do to improve the audio on my next videos!

[@leragorbacheva2447]

Thank you! I had a problem whith this All button every my project

[@KUZON99]

Hey thelazygod, again super helpful tutorial! Is it possible to link to these tabs? E.g. on the Home Page I show a preview of projects with these tags and if I click on a tag -> Can it take me to the Projects list with the tab already chosen?

[@thelazygod]

Thanks! Yeah, if you enable the “show query” option on your CMS Filter you can link to the page with the projects list with the filter set through queries in the URL e.g. ?category=Fire. You can read more in the “show query” option on Finsweet’s website: finsweet.com/attributes/cms-filter

[@patrickdossantos1739]

Great tutorial, thank you! On mobile there is a strange bug/glitch when switching tabs where the text that is inside the collection items flashes. I applied the tutorial to my project and this happens. But this also happens in your clonable. Do you already noticed it and do you have a solution for this?

[@thelazygod]

Thank you for the kind words! CMS Filter has a 100ms fade transition by default. If you want it to be instant you can add fs-cmsfilter-duration = "0" as custom attribute on the list.

[@rhysdyson2880]

Hey mate, I need to create a slightly more advanced filter, that will give you a second set of options based on your first selection. Is that possible using Finsweet? EG: You select a make of a vehicle, then have options appear to select the model. Upon selecting the model the content appears.

[@torichitty2049]

Thank you! Is there a way to have more than one category / theme assigned to a project?

[@thelazygod]

Yeah, the same approach works for that. Then you would use a multi-reference field in the collection for the categories. And inside of each collection item on the page you would nest another collection list to show all categories which have been selected.

[@vortexdefense2258]

keep up the good work just found you and subscribed

[@lachie7153]

Your so helpful and great keep up the good work!!

[@thelazygod]

Thank you, that means a lot! I'll soon have some more stuff coming 🔥

[@wisssse]

Great video! I've noticed that somehow the finsweet CMS filter is breaking my vimeo embed once I've clicked on a button tag. Have you ever had the same issue?

[@thelazygod]

I haven’t heard about any issues with Vimeo embeds and Finsweet CMS Filter before. They do have an attribute you can add if the filter breaks your Webflow interactions, could be worth checking if the issue is related to.

[@onemoment_hk]

My theme is a multi reference field so I created a nested collection list. However, after I set the text attribute to the text, it does not work. What should I do? Thank you!

[@thelazygod]

It should definitely also work for nested collection lists. I've added an example that also uses multi-reference to the cloneable. Check it out here: cms-filter-all-styling.webflow.io/multi-reference

[@KUZON99]

Hello thelazygod, thank you so much for this video! This saved my client project. I now added multiple tags to each project and now the "All" button doesn't work anymore. Do you now why this might happen?

[@thelazygod]

Glad you liked it! Hard to say without checking the page, but I'd suggest to check the attributes are referring to the same 'field identifier', and make sure the radio buttons are in the same group.

[@onlyyapple]

love the great content, can i ask what software u are using to record that tutorial? love the smooth zooms and mouse highlightning

[@thelazygod]

Thank you! I’m using an app called Screen Studio, it’s really great for this type of content and makes editing a breeze. I have an affiliate link for it here screenstudio.lemonsqueezy.com?aff=wwRey

[@digitalperegrination]

Thank you.

[@s.aga73]

Hey there! Could you help me with the CMS collections set up? Like you have two lists, one game level with all the projects/games and one themes which is essentially the filtering - how do i set this up? As they both essentially contain the same items right

[@thelazygod]

Hey! The two collections don’t contain the same items, but one is referencing the other. In my example, the first collection “game levels” has one item for each level, and these have a reference field that reference the second collection. The second collection is “themes” and contains one item for each theme (e.g. fire, water, air etc.). Of course the first collection could be “blog posts” and the second could be “topics” or whatever fits your needs.

[@alyu6351]

Does it work with pagination?

[@thelazygod]

Yeah you can combine it with Finsweet’s CMS Load attribute for your choice of pagination mode