List Filter in Webflow with 'All' button using V2 Finsweet Attributes
Автор: thelazygod
Загружено: 2025-09-05
Просмотров: 2179
Get the cloneable: https://try.webflow.com/thelazygod-cl...
List Filter by @Finsweet https://finsweet.com/attributes/list-...
Twitter: / justriziki
---------------------------
Learn how to filter a collection list in Webflow with dynamic filter categories from a reference field and a pre-selected 'All' radio button to reset the filter using Finsweet List Filter from their updated V2 Attributes. In this updated video I'll also show how to filter on tags from a multi-reference, add facet count and style filter options with no results.
---------------------------
Time stamps
0:00 Intro
0:35 Adding the library script
1:25 Webflow collection list structure walkthrough
1:48 Add a form for the filter options
2:15 Adding a radio button style filter for themes
2:52 Adding attributes to collection list and form element
3:53 Adding field identifier attributes to radio buttons
5:42 Adding the all button
7:30 Styling the filter buttons
7:46 Mistakenly hiding the radio (foreshadowing)
10:13 Realising that it's not keyboard navigable because I hid the radio
11:57 Adding the checkbox style filter for tags multi-reference
14:05 Adding facet count
15:20 Styling empty filter options
---------------------------
Want to record videos like this? I’m using Screen Studio to record and edit professional looking videos in no time. Get the Mac app:
https://thelazygod.com/screenstudio
---------------------------
Thanks for watching! Subscribe to stay in the loop ✌️
---------------------------
This description contains affiliate links. If you make a purchase through these links, I may earn a small commission at no extra cost to you. Thank you for supporting the channel!
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке: