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.
*this is the actual product, check the demo
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.
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
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.
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.
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:
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.
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.
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.
Use the option field to create your filter categories.
Once created all of the needed fields, you can start to create your items.
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.
You can add the pagination using a template of needed elements we're providing in the duplicated file.
Add your required sort choices dynamically from the fields you created in your CMS collection list.
Set the data filter according to the CMS field you want to enable the users to search for.
Add an empty state with a pre-delivered reset button to upgrade the user experience.
That's it. Now you've created your filter list for your Webflow website.
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