Webflow and CMS filters with Jetboost

What is Webflow’s CMS?

Webflow’s CMS (Content Management System) allows you to create, manage, and modify content on a website without needing to write code. It’s designed to be visual and composable, making it easy for teams to create website experiences specifically for the client's needs. Here are the key components and features of Webflow’s CMS:

1. Dynamic Content in the CMS: In Webflow, you start by creating a Collection — a database where you can store and maintain content to reference throughout your site. Each Collection stores a different type of content. For instance, you can create Collections of blog posts, team members, job postings, recipes, etc. Each Collection is composed of Collection items (each Collection item in a “Blog posts” Collection would be a single blog post).
2. Designing with Dynamic Content: Once you’ve structured your Collection and created Collection items, you can reference that dynamic content on your site using Collection lists and Collection pages.
   • Collection Lists: Collection lists let you reference dynamic Collection content on any site page (including static pages, like your site’s home page). You can show or hide specific Collection items with filters or conditional visibility based on values in the Collection fields, as well as sort the content.
   • Collection Pages: Collection pages are automatically created for every Collection item in your Collection. You can think of a Collection page as a design template for all the items in your Collection — that is, every Collection item in your Collection will use the design you create on the Collection page.
3. User Access Management: Webflow CMS allows you to control user access. You can control whether someone is a viewer, a content creator, an administrator or just a member (for a website with private content).
4. Content Delivery: Webflow CMS ensures that different languages and tools work together to create a website users can read and pass through the sections easily.
5. Content Delivery: Webflow CMS ensures that different languages and tools work together to create a website users can read and pass through the sections easily.

To summarize, Webflow CMS is a powerful tool that allows you to create, manage and modify content on a website without having to write code. It’s visual and composable, making it easy for teams to create brandable websites tailored for client’s unique needs. From creating and organizing content to creating custom templates, it unlocks the full potential of Webflow’s CMS and helps you use Webflow's features efficiently.

What is Jetboost?

1. Real-time, On-page Search: This feature allows users to search items directly on a page in real-time as they type. It’s particularly useful if you want to search a single CMS list, not your entire site. It even works with paginated lists.
2. Dynamic Filters: Jetboost’s Dynamic Filters Booster allows you to add dynamic filters to your site without writing code. This is useful for sites with different categories, tags, or other groupings. For example, it can be used for eCommerce stores and blogs. You can make any CMS list filterable using fields like categories or tags. You can create your filters using radio buttons, checkboxes, buttons, or even link blocks styled however you want.
3. Favorite CMS Items Booster: This feature allows site visitors to favorite or bookmark items. It’s designed to be simple to add to your site, without any complicated logic to set up.
4. Easy Setup: Jetboost provides an easy step-by-step setup process, allowing you to add powerful features to your site without having to edit code. You can connect Webflow to manage all your projects easily.

Jetboost is designed to be easy to use even for people without programming knowledge. It extends the functionality of Webflow CMS with real-time search, dynamic filtering and more. It is a powerful tool that is much easier to implement than the alternatives.

Ways to use a CMS filter

1. Radio Buttons Use radio buttons when you want your users to select only one option at a time. Perfect if you want to let your users filter your video or tutorial directories by topic.

2. Checkboxes Do you want your users to be able to filter by multiple options? Then, try checkboxes. Let your users filter your recipe directory or job board by multiple choices.

3. Buttons Single Selection ‍

Single-select buttons act like radio buttons, but these buttons are completely customizable. Add as much styling as you want!

4. Buttons Multi-Selection

Multi-select buttons act the same as single-select buttons. But, your users can filter by as many options as they want! Perfect if you want to let your users filter your eCommerce store by product type, size, color, etc.

5. Link Blocks

Link blocks let you design the appearance and behavior of your filters. Link blocks act the same as button filters. But, you can also add simple CSS to show or hide elements inside your link blocks. Add a little fun to your filtering with Lottie animation icons!

6. Select

Use select if you want to let your users select a single option from a dropdown list. This is another great way to filter content directories.

7. Match Any Selection

Use match any selection if you want any selected options to display. For example, if your user filters for three T-shirt sizes in your eCommerce store, all products with at least one of the selected sizes will display.

8. Match All Selections

Use match all selections if you want all selected options to display. For example, if your user filters for three T-shirt sizes in your eCommerce store, only products with all three sizes available will display.

9. Multiple Filters

Want to let your users filter by various fields? Use multiple filters to combine any of your basic or multi-reference filters. Let your users filter your real estate listings, and add a “recent” button to display any new listings.

10. Dropdown Multi-Filters

Use dropdown multi-filters to add any of your filters (checkboxes, link blocks, buttons, etc.) to Webflow’s Dropdown element.

11. Multi-Filters and Search

Combine your filters with Jetboost’s Real-Time, On-Page CMS Search Booster to create filterable and searchable CMS collections. Use multi-filters and search to give your users an interactive user experience.

Webflow CMS filtering with Jetboost:

Step 1: Set up your Jetboost account

If you’re not already a Jetboost user, sign up for Jetboost for free. Add your Webflow account to Jetboost. All set! You’re ready to start adding boosters.

Step 2: Add the CMS Dynamic Filtering Booster to your Webflow website

Navigate to your Jetboost dashboard. Click “Add Booster” and add the “Dynamic List Filters” booster.

Step 3: Configure the CMS Dynamic Filtering Booster

First, name the booster on the left-hand sidebar, this will help you find it in the future if you need to make changes.

Then select which CMS Collection on your site you want to filter.

Select which CMS Collection field you want to filter by. The field must be a Single-Reference, Multi-Reference, Numeric, or Option field. For this tutorial, let’s use an Option field.

Choose whether your users can filter your CMS Collection by multiple options. What does this mean? If you select “no,” users will only be able to filter by a single option. For example, users will only be able to filter your recipe directory by a single main ingredient. If you select “yes,” users can filter by multiple main ingredients. Users can select chicken, fish, and/or beef, etc. - the sky’s the limit! For this tutorial, let’s choose multiple options.

Step 4: Add the Jetboost script to your Webflow website

Add the Jetboost script to the “Head Code” section of your website.

Step 5: Configure your CMS Collection List

Add the provided Jetboost class to your Collection List Wrapper element.

Then, add an Embed element inside of your Collection Item. Add the provided Jetboost code to the Embed element. Click “save & close.” You can skip this if you already added the Embed element with a different booster.

Publish your webpage! Visit the published web page and copy the URL. Paste to the “Test URL” on your Jetboost dashboard. Or, leave the Test URL blank if you’re testing the homepage.

Step 6: Create your filter

Decide whether you’d like to use a button, link block, select option, or check box for your filter. The element you select will be how your users filter your CMS Collection List. Let’s select a button for this tutorial.

Add a div block where you want your filter options to be on your webpage. Copy the provided Jetboost class, and add it to the div block.

Add a button as a child element to your div block for each of the options in your CMS Collection’s “option” field. For context, let’s revisit our recipe directory example. If you’ve decided to filter your recipes by main ingredients, add a button for each main ingredient option (chicken, fish, beef, etc.).

Now, you can style your button. You can use all Webflow button designs with Jetboost!  ‍Important: The text of each button must exactly match the text of each choice in your CMS Collection’s “option” field. If not, the filter will not work.

Style your “active” filter button. Copy the provided Jetboost class, and add it to your button. Style this class how you want the button to appear when selected. Once you’re finished styling it, remove this class. Don’t worry, it’s still there. Jetboost will automatically add/remove it, as needed.

Step 7: Final checks

If there are no final issues detected, click “continue.” That’s it!

Conclusion

Remember that Jetboost’s CMS dynamic filtering is a powerful tool that allows your users to filter your content with the click of a button. It’s a simple filtering solution with no code for designers. With Jetboost, you can add complex filtering to your Webflow website without complicated code.