Used by 50,000+ Teams & Agencies
$128,000,000+ earned
Free until launch. No credit card needed.
Used by 50,000+ Teams & Agencies
$168,000,000+ earned
Vibe Code
with Memberstack →
Memberstack Blog

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.

Try Memberstack For Free!
October 30, 2025
0
Views
TABLE OF CONTENTS
Julian Galluzzo & Duncan Hamra

Introduction:

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:

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:

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:

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:

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:

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:

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:

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.

Add memberships to your project in minutes.

Learn more

Over 200 free cloneable Webflow components. No sign up needed.

View Library

Add memberships to your React project in minutes.

Get started

Related Webflow Components

Clone over 250 free Webflow components - no registration needed!
No items found.
What is Memberstack?

Auth & payments for Webflow sites

Add logins, subscriptions, gated content, and more to your Webflow site - easy, and fully customizable.

Learn more
Start building

Try out Memberstack & discover what you can build!

Memberstack is 100% free until you're ready to launch - so, what are you waiting for? Create your first app and start building today.

Unlimited free trial