The Searchable Filter List for Webflow– by No Code Flow
Build and style a category filter right within the Webflow CMS. Filter and search through your Webflow Collection List with this No Code Flow component.
Because everything is 100% built and styled within Webflow, only using plain JS embeds for functionality, you can customize everything. Because no one wants a shitty iFrame that doesn't fit the overall visual approach of a website in 2022 anymore.
Once added to your project, you can just start to style the classes – like you do it with everything else you build in Webflow.
We'll send you a set of classes and some custom code, that you can add to your site with a little tutorial. We provide a text version and a video. It fells a bit like building an Ikea cupboard.
The whole data in the component comes out of the Webflow CMS, so that your clients can easily add and change items on the live website.
We took care of the functionalities and the code, so that you can focus on the style and User Interface.
There is no third party interface, no shitty surprise, no random UI bugs because everything is all in Webflow. If there is a problem, text us and we'll help you. As easy as that.
In case you just want to start super fast or are searching for style inspiration, we provide with a styled and ready to use version.
Webflow is charging you on a monthly basis, we don't. With the purchase of this tool you can add as many filters as you want within one Webflow project. Made for Agencys and Freelancer, because you simply use your client budget, but don't have to built it yourself.
Search and buy a component on the No Code Flow Website. The Payment fulfillment is 100% secure and run by Gumroad – this is more secure and easier for every one of us.
We'll send you this form to give us your Webflow account E-Mail address and to type in the license key you will get via E-Mail to verify your purchase. After that, we'll send you 2 projects to your Webflow account E-Mail address. The first will be the template file, in this case "NCF Calendar Styled Template" and the other one is the plain project, which you can style from 0 "NCF Calendar Plain Version".
Also you will get a little tutorial video to implement the component on your website.
After implementing the component, you will be able to scale every detail of it right within Webflow.
Things that might be unclear
FAQs
Can I see how it works before purchasing?
Yes! You can see the Webflow Demo of our Demo File. It is build with the exact same code that you're going to use to. You can even check it in the inspector if you want to.
Can I customise every UI element?
Yes, in our tutorial and the file we'll provide, you get a "template" for every different state, that you just can style. So can customize EVERYTHING.
Is there a prestyled verison?
Yes, we will provide you with the template file which you can style from zero and with our demo file that you modify in any way you want to.
For how many different sites can I add the CMS Filter List
Per purchase you can add the item to 1 Webflow project. You can transfer the project while doing so, but you can't clone the site and use it double. The idea is that it's fair for you and your client. You save the hours of work for one single project. No monthly fee, just one single payment.
What do other people say
Customer Feedback
Uros Mikic
Agency Owner
What you've done is excellent. Really worth the money!
A filter list that makes you able to search through one CMS element of your website. You can sort, filter with chips, a list, style the active state and everything you can image.
With this plugin you can turn Webflow into something more. A filter list that works with up to 100 CMS items in Webflow and saves you a lot of time.
Easy editable for clients and yourself within the editor and ready for 100% custom Webflow styling.
Included in your purchase
You will get an E-Mail with all important data that you need to get started in your project
Plain Filter Version for a rapid styling from zero in your Webflow file
Pre-Styled Version (demo file) that you can instantaneously use within your project as a template
A video tutorial that guides you through the step by step installation guide
The License of your purchase for a one time usage with which you can make sure that you're using it legit
* it takes max. 24 hours until we've sent you the required data to get you started :)
* How to create a dynamic filter in Webflow with the No Code Flow Filter and Search component
The basic options to filter CMS items within Webflow are quite limited. You can build workarounds with tabs or other elements – but without custom coding, you probably won’t be able to create a filter with the user experience you desire.
But what options within a filter are desirable? And if that’s clear, how can you build a filter like this in Webflow without custom coding everything? The answer might be our No Code Flow Filter and Search component for Webflow.
In the next 7 minutes we’ll explain to you, what features determine a good filter user experience and how you can build a filter like this in Webflow
What determines a good and easy to use filter
Don't overwhelm your users with the filter options
To start off, it's important to keep the number of filter options as small and as limited as possible. Since you want to use a filter on your website, it's likely that the amount of information itself is already that complex, that you need to make scanning the existing information easier. This same thought should then be applied to the filter options as well. Since the more possibilities and choices a user has, the less he/she understands what to do. This is called the paradox of choice.
To reduce the number of possible choices even more, adding pagination to limit the visible number of filtered items on one page is recommendable.
Provide clear and understandable filter categories
Make sure that it’s understandable “what" is filtered right now and what not. This can be solved through obvious and clear active states of the filters. Also, we recommend working with common and accepted filter interface components like tags or checkboxes.
Furthermore, you should make it easy to reset a category filter. A filter should be resettable piece by piece or with a filter reset button, that removes every applied filter with one click.
Build understandable and easy to scan filter items
The most important part of a filter list are of course the items within the list. Since these items will later be filtered, they should provide a clear visual structure and therefore be easily scannable. Less is more since this element will be very redundant within the interface. The most important aspects to design a filter list item like this are:
Create additional information to each element that contains an additional preview of the content
Contain the different categories
Make sure to highlight the most important/most clicked items
Provide a clear call to action (if existing)
Make the filtered items sortable
To reduce the number of items that have to be scanned by the user even more a sort button can help. Thinking of products in an online shop for example, people usually want to start off with the cheapest products.
A good default state for a sort option is always to sort the items alphabetically regarding their names.
Add a search bar
Making a list searchable helps especially users that enter the site already with an intention to find a specific item of your list. Like searching in a list of concerts for your favorite artist.
Therefore it's helpful to provide tips on what to search in the search field of your filter list. Because "Search artist" already is so much clearer than just a "Search".
*Bonus Tip: don't forget the empty state – since a blank space out of nowhere can seem like a bug and annoy or confuse your users
So, now we talked about a basic good filter UX. But can you implement all of this in Webflow with the No Code Flow filter component? So let’s find it out together. We’ll guide you step by step through the different points.
Create a dynamic filter in Webflow with the No Code Flow dynamic filter list
We now guide you step by step through a tutorial of how you could create a filter like we described above within the Webflow CMS.
Create a filter list in a Webflow collection list
Overview of the fields we used in our filter collection list
Implementing categories into your filter in Webflow
Use the option field to create your filter categories.
Categories we created in our demo Webflow filter
Once created all of the needed fields, you can start to create your items.
The finished list of filterable items in the No Code Flow demo
You can then add the created filter attributes into your Webflow designer, using just the out-of-the-box Webflow Designer without the need to write custom code. The filter items are created as a normal styled collection list item of Webflow.
Adding the filter attributes to the filter chips
Add pagination to the filter list within Webflow
You can add the pagination using a template of needed elements we're providing in the duplicated file.
Needed elements to add the pagination to the filter list in Webflow
Making your filter items sortable
Add your required sort choices dynamically from the fields you created in your CMS collection list.
Adding the sort filt to the filter list
Implementing a search bar into your Webflow filter list
Set the data filter according to the CMS field you want to enable the users to search for.
Adding the search bar and set the searchable collection list field – in this case the tool name
Don’t forget the empty state
Add an empty state with a pre-delivered reset button to upgrade the user experience.
Providing an empty state and add a reset button within your filter list
That's it. Now you've created your filter list for your Webflow website.
Our vision of this filter list for Webflow
We from No Code Flow build websites in Webflow for nearly 4 years. For us, it’s the only tool that makes web design a fun experience. At one point though we built so many workarounds, that we thought: why not share all of this work? It would be awesome if everyone could build more advanced Webflow websites without suffering as much as we did. We are part of the Webflow community and use every one of our tools in our own projects. Therefore, we have a big interest in developing this filter list further and share other created components as well.
So we'd love to get your opinion: If you have any feature idea, that you would need in a filter list component for Webflow, contact us. With every feedback, you'll help us to enable you and other creatives to build more awesome Webflow websites. Happy building!
P.S.: get the latest updates of our latest components right here
So... for who did we build this?
People who build websites with Webflow and have no idea how to code
This tool helps with a high-quality prebuilt JS component which is fully integrated in Webflow. No coding required, 100% Webflow styleable, used in live websites and working at this very moment.
People that love to safe a load of money and time while building Websites in Webflow
To build this you’ll need between 14-24 hours. If you earn 70$ per hour you spent 840$-1680$ on creating this filter list on your own. You save actually at least 816$ with this solution.
.webp)
.webp)
.webp)
.webp)
.webp)
