Are you overwhelmed by large CMS collections with complicated user navigation? No worries, we can help. Use Jetboost to add CMS filters to your Webflow website without any coding. While Webflow does offer filtering in the Designer, you may need more.

Jetboost’s CMS Dynamic Filtering lets your users filter your content with the click of a button. This is useful for websites like eCommerce stores and blogs. 

In this article, we’ll teach you how to add CMS Dynamic Filtering to your website. We’ll also share 11 unique ways to customize your filters to fit the needs of your business and your users. It’s simple no-code filtering for designers.

How can I use a CMS filter on my website? 

Check out some of the common use cases for this versatile add-on below. 

Blogs. Let your users filter your blogs by tags, category, or author. Increase your readership with a user-friendly blog that’s easy to search and read. 

eCommerce. Streamline the shopping experience for your users with filters. Match any (or all) of the selected filters to items in your store. Allow your shoppers to quickly find the exact product they're looking for. 

Resource Directories. Let your users easily access content in your large resource directories using filters. Do you have directories that are part of a membership site? Jetboost integrates with Webflow Memberships, Memberstack, MemberSpace, and Outseta.

Real Estate Listings. The ideal use case for filters! No one wants to manually sort through houses or apartments in the wrong location or price range. You can even add default filters to control what your users see first when your webpage loads. 

Job Boards. Enhance the job search experience for your users with multiple filters. Let users filter by company, role, location, pay scale, etc. Check out our live demo job board. 

How do I add a CMS filter to my Webflow collection list?

With our robust CMS Dynamic Filtering Booster, you can add complex filtering to your Webflow website without complicated code. You can also choose from free Power Ups to enhance this add-on.

Working with a Collection List with over 100 items? No problem. Unlike other add-ons, Jetboost will find all items for you, not just the first 100. From reset buttons to customizable active versus inactive filter classes to “no results found” messages, this booster does it all.

Design your filter options the way you want! We give you complete developer control. Follow the steps below to add this dynamic booster to your Webflow website. 

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.

Decide if you want to add the selected filters to the URL. We recommend this if you want your users to be able to share their filtered results. 

Step 4: Add the Jetboost script to your Webflow website. 

Add the Jetboost script to the “Head Code” section of your website. If you’re already a Jetboost user, Jetboost will skip this step for you. Hooray.

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 webpage 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. Click “test and continue.” (If there are any issues, we’ll let you know how to fix them.) 

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. 

Publish your webpage, and test it again! Remember, we’ll let you know how to fix any issues. 

Step 7: Final checks. 

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

Prefer video format? Check out our video tutorial below.

If you’re interested in learning more about how to filter by a single-reference field, check out our video tutorial. Learn more about filtering by multi-reference fields in this guide. Ready to get started now? Try CMS Dynamic Filtering for free! 

11 Ways to Use a CMS Filter

Curious about the different CMS filtering options? Keep reading to learn 11 unique ways Jetboost can help you add comprehensive filtering to your Webflow website. 

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!

‍Bonus: We automatically add a class named `jetboost-filter-active` to selected buttons. Style this class how you want selected buttons to display.

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.    

Upgrade Your Webflow Collections with Jetboost CMS Filters 

Simplify how your users interact with your CMS Collections with CMS filters. We give you control to create and style filters that work for you and your users. From single-select buttons to dropdown multi-filters, it’s simple to add dynamic filtering to your website. Bonus, your users will love how easy your content directories are to navigate. 

Jetboost is the easiest and fastest way to add filtering to your Webflow website. Try it for free today!