Load more button for Webflow CMS collection

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.

<brix-header id="1" title="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:</brix-header>

<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js"></script>

<brix-divider>

<brix-header id="2" title="Configure CMS collection">Select your CMS Collection List Wrapper and add the attribute:
- Name: fs-cmsload-element
- Value: list
</brix-header>

<brix-divider>

<brix-header id="3" title="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.
</brix-header>

<brix-divider>

<brix-header id="4" title="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.
</brix-header>