How to add a real-time load more button to your Webflow CMS collection

Webflow's CMS collections are powerful tools for displaying dynamic content on your website. However, the default pagination options can be limiting when you want to create a more interactive user experience. One common need is adding a "Load More" button that dynamically fetches additional content without refreshing the page.

While this functionality isn't available in Webflow by default, we can implement it easily using many third-party addons tegrations for Webflow that extend the capabilities to allow this functionality. One of the most popular ones is Finsweet Attributes.

Finsweet is a popular Webflow development team that provides various tools and addons to enhance Webflow's capabilities — While there are other options like Jetboost (a premium service offering advanced filtering and pagination), Finsweet's solution is perfect for implementing a simple load more button without any additional costs.

Load more implementation guide with Finsweet attributes

Step 1: Prepare your CMS collection

If you already have a CMS collection on your page, you can skip to the next step. If not:

1. Go to the Elements panel
2. Navigate to the CMS section
3. Add a Collection List to your page

Step 2: Configure Webflow CMS collection settings

1. Select your CMS Collection List Wrapper
2. Open the Settings panel in the right sidebar
3. Find the Attributes section
4. Add a new custom attribute:
   • Name: fs-cmsload-element
   • Value: list

Step 3: Set up pagination

1. In your CMS Collection settings, enable pagination
2. Choose the number of items to display per load
   • For example, if you set it to 6, the page will initially show 6 items
   • Each time the Load More button is clicked, 6 more items will appear

Step 4: Add the Finsweet script

Now that we've configured our CMS collection settings, we need to add the essential Finsweet script to enable the load more functionality. This script serves as the bridge between Webflow's native CMS capabilities and our enhanced pagination features. Add this code to your site:

1<!-- [Attributes by Finsweet] CMS Load -->
2<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js"></script>

Where to add the code depends on your implementation:

For single page implementation:

• Open Page Settings
• Go to Custom Code
• Add the script in the Head section

This means you're adding the Load More functionality to just one specific page of your website. For example, if you have a blog page with a CMS collection, and you only want the Load More button on that page, this is the option you'd choose.

For site-wide implementation:

• Open Project Settings
• Navigate to Custom Code
• Add the script in the Head section

This means the Load More functionality will be available across your entire website. Choose this option if you have CMS collections on multiple pages (like a news feed in your footer that appears on every page) or if you plan to add more CMS collections with Load More buttons in the future.

Testing your load more button

Important: The Load More functionality won't work in the Webflow Designer preview. To test it:

1. Publish your site to your Webflow staging environment (webflow.io)
2. Check if the Load More button works correctly
3. If everything functions as expected, you can publish to your live site

Need additional help?

If you need help implementing more advanced functionality or want to create a custom solution for your specific needs, BRIX Templates' team of experts is available to assist. We've developed hundreds of Webflow sites with various complexities and can help you achieve the exact functionality you're looking for.

Whether you need help with this specific implementation, something else, or are looking to develop a completely new site with advanced features, don't hesitate to reach out to our team of Webflow Experts.