Tutorials#Tutorials

WF Weekly - Episode 21

Learn how to implement completely custom CMS filters and full-collection CMS pagination on your Webflow site fast using the powerful Webflow Code Component and a dedicated starter project.

Julian Galluzzo & Duncan Hamra·Contributors
|
October 30, 2025·1 min read

Introduction:

__wf_reserved_inherit
Looking to create advanced filtering on your Webflow CMS collections without relying on third-party scripts? This tutorial is for you! We guide you step-by-step through setting up a powerful starter project that uses the new Webflow Code Component to inject custom filtering logic directly into your site. Follow along as we clone the GitHub repository, install dependencies using npm, and use the Webflow Library Share command to authorize and deploy the code. You'll learn how to quickly configure search fields and range sliders using naming conventions similar to Fin Sweet Attributes, allowing you to bypass Webflow’s 100-item limit. The resulting system caches your entire collection for rapid, full-collection filtering and custom CMS pagination.

Setting Up The Local Development Environment:

__wf_reserved_inherit
The first thing that I'm going to do is I am going to create a new folder on my computer. So, in here, I'm just going to go ahead and make a new folder and let's just call it like filter demo or something like that. Then I'm going to start a new terminal in that folder.

Authorizing and Sharing the Webflow Code Component:

__wf_reserved_inherit
And the next thing that I'm going to want to do is run this npx webflow library share. Just like that. So then Web Flow is going to open the authentication window in your browser and it's going to show you your list of workspaces. Go ahead and click whichever workspace you want this to work in and then click on continue.

Installing the CMS Filter Components in Webflow:

__wf_reserved_inherit
Now, if I go ahead and open my libraries over here, we can see CMS filters right there. So, I'm just going to go ahead and click install on that. Says it's installed. Now I can go to my components over here and as we can see we have CMS filter search and CMS pagination. So what I'm going to do is I'm just going to grab my container over here and I am going to put in my search and I'm going to put in my pagination.

Configuring CMS List Attributes For Filtering:

__wf_reserved_inherit
And then we have a bunch of stuff that we can configure in here. So by default this is set to have a search input and two range sliders. That's how it's set up in the demo, but it is completely ready for you to change it.

Customizing the Filter and Pagination Styling:

__wf_reserved_inherit
So for the styling, I'm actually going to go ahead and put in a variable here. So we can see blue. I'm just going to copy the CSS for that. And then that is actually what I'm going to paste in here. I'm going to do the same thing as well on my pagination component.

Testing the Live Custom Filter and Pagination:

__wf_reserved_inherit
So, you're going to notice the first time that you test it out, it's going to take a second to load, and it's actually caching all of your CMS items. So, as you can see here, it's just showing 138 results, and we have 10 per page.

Modifying the Starter Code for Your Project:

__wf_reserved_inherit
Now if you have a different list which you probably do. You probably don't have a menu with a name and calories and price. You can go ahead and change the code as you wish. I just use Claude Code for that. If you just want to write the code yourself, that is totally up to you. But this is the perfect starting point so that you are able to get custom CMS filters on your web flow site using code components.

Topics

#Tutorials

Written by

Julian Galluzzo & Duncan Hamra

Contributors

Related Articles

Tutorials

How To Build An Animated Accordion in Webflow

Learn how to create a fully functional animated accordion in Webflow using native interactions.

Neal

Nov 5, 2025

Tutorials

WF Weekly - Episode 20

This video is your complete guide to leaving Chart.js behind and leveraging Recharts to build beautiful, responsive, and fully customizable charts using Webflow's native Code Components feature.

Julian Galluzzo & Duncan Hamra

Oct 23, 2025

Product

What is Gated Content? Examples, Strategies, Tutorial & More

Gated content is content that users can access only after providing their information. It's a powerful strategy used for lead generation. Let's learn more about Gated Content in this blog!

Shubham Sahu

Jan 27, 2022