CMS Load More

How to add CMS Load More feature in Webflow?

Quickly add CMS Load More feature on your Webflow website by changing the attributes of the required elements. ‍

‍

_{Step #1}

Copy CMS Load More <script>

Copy the script and paste it into the </body> tag of the particular page. You can do so by clicking on

1. Pages on the left navigation or, by tapping (P) on your keyboard
2. Select the settings icon beside the page you want to add the script in
3. Scroll down, you will see a section called Before </body> tag
4. Paste it here

‍

‍

_{Step #2}

Set Custom Attributes

‍

You will need to add custom attributes to the elements on your page.

1. Element - CMS Collection Wrapper
   Add the attribute name "neue-wrapper" to the collection wrapper. Do not enter anything in the attribute value field.
2. Element - CMS Collecition List
   Add the attribute name "neue-list" to the collection list. Do not enter anything in the attribute value field
3. Element - Load More Button
   You will need a button which is used to load the collection items. You need to add two attributes to this button.
   1. "load-more" is added to the button with a value. The value is a number which gives the initial number of items displayed on the page. For example,  the value 3 would have an initial display of 3 items from the collection.
   2. "show" is also added to the button with a value. The value is a number which gives the number of items that would load upon click of the button. For example, the value 3 would load 3 collection items each time the button is clicked. ‍

‍

_{Step #3}

Publish your site

It's highly recommended to publish your site on staging environment to make sure the script is working. Once you have confirmed it, you can publish it to your main domain.

‍