BRIX Templates
Load more button for Webflow CMS collection
About the clonable
Try clicking the Load more button below the articles to see how the CMS load more functionality of this Webflow cloneable works.
Try clonable
How Webflow speeds up client deliverables
December 5, 2024
Avoid these common mistakes when using Webflow
December 5, 2024
Webflow vs. WordPress: which one should you use?
December 5, 2024
Step-by-step guide to building CMS websites in Webflow
December 5, 2024
Advanced customization tips for Webflow developers
December 5, 2024
How to turn Figma designs into Webflow projects
December 5, 2024
How to add a load more button to your Webflow CMS collections
Add real-time "Load More" functionality to your Webflow CMS collections with this simple guide. This enhancement allows users to dynamically load additional content without page refreshes.
1
Add the script
Add this code to your site's head section, either in
Page Settings for single-page implementation or Project Settings for site-wide use:<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js"></script>
2
Configure CMS collection
Select your CMS Collection List Wrapper and add the attribute:
- Name:
- Value:
- Name:
fs-cmsload-element- Value:
list
3
Set up pagination
In your CMS Collection settings, enable pagination and set your desired number of items per page. This will determine how many items load with each click.
4
Test implementation
Publish your site to staging (
webflow.io) to test the functionality. The load more button won't work in the Webflow Designer preview.
Read our full article about how to use this cloneable
Read full article
Take a look at our collection of premium Webflow Templates
Also than having free Webflow cloneables, we create cutting-edge premium Webflow templates too.
Browse templates
Want help with your Webflow site? Get in touch with us to get a quote!
If you want to get a hand from the amazing team behind BRIX Templates, get in touch with BRIX Agency today.
Get a quote
