Our CMS Load More enhancement gives you the option to modify the way you load items from your Webflow CMS Colelctions.
Improvement
•
April 6, 2023
•
minutes
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
Pages on the left navigation or, by tapping (P) on your keyboard
Select the settings icon beside the page you want to add the script in
Scroll down, you will see a section called Before </body> tag
Paste it here
Adding script within Page Settings on WebFlow
Step #2
Set Custom Attributes
Follow the steps below to add attribute name and value where needed
You will need to add custom attributes to the elements on your page.
Element - CMS Collection Wrapper Add the attribute name "neue-wrapper" to the collection wrapper. Do not enter anything in the attribute value field.
Element - CMS Collecition List Add the attribute name "neue-list" to the collection list. Do not enter anything in the attribute value field
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.