How to Create Custom Pagination in Webflow CMS
Learn how to create custom pagination in Webflow CMS with Finsweet CMS Load: load more, infinite scroll, and a counter.
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
Good to know
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
