How to Create Custom Pagination in Webflow CMS

In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to build custom pagination in Webflow CMS with Finsweet CMS Load.

1. Add the Finsweet CMS Load script

2. "Load more" mode

On your Collection List Wrapper, add:

• fs-cmsload-element="list"
• fs-cmsload-mode="load-more"

On your "Load more" button: fs-cmsload-element="button". Set the initial number of items to show in your Collection List settings in Webflow (for example: 6).

3. "Infinite scroll" mode

Replace fs-cmsload-mode="load-more" with fs-cmsload-mode="infinite-scroll". Items load automatically when the user gets close to the bottom of the list. No button needed.

4. Show a results counter

Add a Text Block with fs-cmsload-element="items-count" to display the total number of items. Webflow and Finsweet update this counter automatically as items load.

Conclusion

The right pagination setup improves UX and performance. Use cases:

• Blog with a "See more articles" button
• Photo gallery with progressive loading
• Directory with numbered navigation