How to filter a Webflow CMS Collection

Webflow is one of our favorite tools, due to the potential for independence it gives teams, its simplicity and speed when building web pages.

However, currently we still find some limitations in the tool, such as filtering of elements of the CMS. That's why we want to showcase the different options for filtering Webflow CMS Items, so you can better choose the one that suits your project.

There's now 4 options that we consider for our projects:

• Native filtering with Webflow
• Jetboost Filtering
• F'in Sweet CMS Library filtering
• Mixitup filtering

In this post we'll discover the use case of the 4 options and which case is better for your needs.

Option 1: Webflow CMS native filtering

While the options are limited in Webflow in certain use cases, the native filtering capabilities of Webflow may suffice.

A filter can be applied to any collection from its settings tab. You can filter by any of the fields in your collection, using logic to check the value of a field.

What types of filtering can I do?

In general, the filtering logic with Webflow is quite simple, being able to check if an element matches your search criteria or not.

In the case of files such as images, switches and the like you can also use them as filters to configure the visibility on your page. You can, for example, show only those elements that have an image configured.

A positive point is that you can combine these flows,  either that it fulfills all the filters that you impose or that only some of them have to fulfilled. This makes it very versatile when it comes to displaying exactly the information you want from your collection.

However, it is not possible to let the user modify these filters. You will have to give them the pre-filtered content.

What is this filter useful for?

This method can be very useful to filter Webflow CMS content that will not be modified. For example for a Categories page of a Blog.

Any case in which the user does not have to modify the filters will be appropriate to this method, in addition to being the fastest  as it is native to Webflow, and it does not require code for its implementation - unlike the rest.

What is this filtering system not useful for?

In any case in which you need a filtering logic that the user can modify, you will not be able to use this system and you will have to resort to the proposed alternatives.

Option 2: Filtering the Webflow CMS with Jetboost

Under the name of Jetboost are grouped a set of products, called boosters , which allow us to add functionalities to our page and CMS in Webflow.

In addition to the filtering that we will talk about here, there are also boosters to search a collection in real time, mark as favorites, add pagination or automatically mark items as archived in our CMS.  All of them are paid,  costing $ 9 / month each or between $ 19 and $ 29 a month if you prefer to buy one of the packs they offer.

In order to include filtering on our page, the process is quite simple,  Jetboost guides us through a configurator divided into steps, where we will start by selecting which collection we want to filter on and how we want the filtering to be, later it will offer us some codes and names of classes that we will have to put to our elements in Webflow.

All this is done in a guided way, with small videos that can help us, in addition it will automatically verify if the steps have been carried out correctly.

What types of filtering can I do?

We have the so-called basic options, filtering with radio buttons, checkboxes, buttons or links. But it also offers us multi-reference filters, multiple combined filters or even filter + search.

In order to see everything that can be achieved with these filters  Jetboost provides us with an example page that we can also clone in our Webflow.

What is this filter system useful for?

Jetboost is useful when we want to filter our collections in a simple way but without losing functionality, since it offers us a wide variety of filters as well as the possibility of combining it with a search field.

Therefore it is a good option for users who are not very technical but who wish to create a fairly complex filter on their page.

What is this filter system not useful for?

The biggest problem that Jetboost may have for some users is its price, starting from $ 9 to $ 29 per month if we want to use several of its boosters. This price is paid when our project is already in production, that is, on the final web already finished, while we are still creating it, trying Jetboost is totally free.

If budget is a problem or we want to create a fairly simple filter, its cost may not be justified for some users.

Option 3: Filtering the Webflow CMS with F'inSweet CMS Library

F'in Sweet is a US Webflow development agency created by Joe Krug who seeks to push the boundaries of Webflow through programming.

One of the initiatives they have created is the CMS Library, a code library that allows increasing the possibilities offered by Webflow natively, allowing things like combine collections, sort them, infinite scrolling and of course, filtering.

To perform the filtering, it is necessary to prepare the filtering system following the instructions, very well explained both in the technical documentation and in the video tutorials as well as inserting a small code script.

Basically this library is in charge of searching for text present in the code of the CMS elements . So it is necessary that the content you want to filter an element by is present - even if it may be hidden.

In order to further facilitate the generation of this code, they have developed a visual constructor for it, which simply by following the steps in the tutorials allows you to introduce the functionality in your project.

What types of filtering can I do?

You have the ability to filter by multiple types of field, such as search engines, drop-downs, selectors, radio buttons, checkboxes ... being able to combine them as you wish.

The best thing about this library is that it is completely free, without limits of use. That is why it becomes one of the most practical and customizable solutions.

What is this filtering system useful for?

For all those situations in which you need a user to apply certain filters to your library of elements.

Several types of filters can be combined to achieve really complex filtering functionalities, in a very simple way.

Setting up this script is accessible even to non-technical people, thanks to the extensive documentation and accompanying tutorials and the visual script builder.

What is this filtering system not useful for?

It is complex from the analytics perspective to measure when the filters are used, since it requires an implementation with code to measure the events.

It is necessary to set the filtering options manually in the selectors, for example if you want to filter by 3 categories (Web Builders, App Builders and API) you will have to manually create these three options. In case of increasing the categories you will have to make a manual update of these filters.

Option 4: Filtering using the MixitUp library

This option is one of the most versatile, since it allows you to use a filtering library such as Mixitup in the Webflow CMS. However, you need to have quite a bit of technical knowledge to make it work.

You can find the library and all its documentation from this link.

This difficulty, however, is simplified thanks to the work of the Webflow team, who have prepared a tutorial on how to implement it directly in Webflow, which is recommended reading before deciding on this option:

What is this filter system useful for?

For complex filter systems where you want to have more control over the filter system.

You can include certain options that would not be available in any of the above, such as having filters automatically created from a collection or adding attributes that allow you to measure more easily.

In either case, the limits are very few if you have the resources and the right knowledge to do it. The library works incredibly well and offers a lot of versatility.

What is this filter system not useful for?

In cases where you don't have a developer on your team, this option is not recommended. That because, although creating the system is not that hard, maintaining it or making changes to it is complex and requires dedication of technical resources.

What should I use for filtering my Webflow projects?

Obviously there will not be an equal answer for all projects since it will depend on the requirements and resources that are available. However, we can give you a small guide so that you can make a more informed decision.

If you are going to implement basic CMS filtering, you can perfectly use the native Webflow system. For any filter that is not going to be modified it is the best option.

In case the user can modify the filters, we will have three options, each one appropriate to a case:

• Jetboost is the easiest to configure and keep updated, perfect for teams that do not have much technical knowledge or cannot dedicate the resources. It is our favorite option to work for clients. The price is € 9 / month for filtering in production.
• F'insweet: The default option to use to filter webflow because it is completely free and not too complex to install, as well as allowing a lot of flexibility.
• Mixitup: For cases in which you want to have absolute control of the filtering, a greater analytical capacity and you have technical resources that you can dedicate to implement it.

This has been our analysis of the filtering systems in Webflow. If you have used any of these systems in your projects we would love to know how you have done it.

‍