Functional
CMS Load
Set up powerful load functionality on Webflow CMS Collection Lists. Load items under, infinite scroll, pagination, and render all items.
Step #2
Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
Required for minimum setup
Below is the one element attribute required for CMS Load. Choose one of the four options for the list element.
Add this attribute
Description
Name
fs-cmsload-element
Value
list
This is the CMS Collection List that will have load more functionality.
IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.
IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.
Enable "Show page count" in Webflow's native pagination settings to activate.
No attribute needed.
Increase the speed of your loaded pages by enabling the native Webflow pagination page count option. The page count element can be visible or hidden on the page. With this setting enabled Attributes can optimize your load based on your page count.
By setting this feature you get a 100% improvement for every 4 pages.
4 pages = 200% faster
8 pages = 300% faster
12 pages = 400% faster
16 pages = 500% faster
.....
No attribute needed.
Increase the speed of your loaded pages by enabling the native Webflow pagination page count option. The page count element can be visible or hidden on the page. With this setting enabled Attributes can optimize your load based on your page count.
By setting this feature you get a 100% improvement for every 4 pages.
4 pages = 200% faster
8 pages = 300% faster
12 pages = 400% faster
16 pages = 500% faster
.....
Where?
Select the native Webflow pagination button. Go to the "Settings" panel for that button element. Select "Show page count". This element can be hidden with display: none.
Add this attribute
Description
Name
fs-cmsload-mode
Value
pagination
This option enables same-page pagination for your Collection List.
The "Next" and "Previous" buttons in the native Webflow pagination settings will be used as the "Next" and "Previous" pagination buttons for this option. Style them as needed to fit your design.
IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.
Warning: Wrapping pagination buttons may result in the "Previous" button disappearing from your site, please avoid using any additional wrapper.
The "Next" and "Previous" buttons in the native Webflow pagination settings will be used as the "Next" and "Previous" pagination buttons for this option. Style them as needed to fit your design.
IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.
Warning: Wrapping pagination buttons may result in the "Previous" button disappearing from your site, please avoid using any additional wrapper.
Where?
Add to an element with fs-cmsload-element = "list"
Add this attribute
Description
Name
fs-cmsload-mode
Value
load-under
This option loads more items on the page under the existing items when the "Next" button is clicked.
The "Next" button in the native Webflow pagination settings will be used as the button that performs the "load-under" functionality. Style it as needed to fit your design.
IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.
The "Next" button in the native Webflow pagination settings will be used as the button that performs the "load-under" functionality. Style it as needed to fit your design.
IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.
Where?
Add to an element with fs-cmsload-element = "list"
Add this attribute
Description
Name
fs-cmsload-mode
Value
render-all
This option is usually not required. Pagination is equally as powerful without the rendering. Please understand it.
This option renders all of the items in your Collection. This loads and renders more than the 100 item limit in a single Collection List.
For example, if you have 5,488 items in your Collection, all 5,488 will load and render on the page.
IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.
** EXTRA IMPORTANT: Please be mindful of what you are loading. Loading thousands of items to the page may not be a good experience for your users, especially those on mobile connections. You should only use this option when it's required for your project. Consider "pagination" instead of "render-all". The "pagination" option is more performant when used with CMS Filter.
This option renders all of the items in your Collection. This loads and renders more than the 100 item limit in a single Collection List.
For example, if you have 5,488 items in your Collection, all 5,488 will load and render on the page.
IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.
** EXTRA IMPORTANT: Please be mindful of what you are loading. Loading thousands of items to the page may not be a good experience for your users, especially those on mobile connections. You should only use this option when it's required for your project. Consider "pagination" instead of "render-all". The "pagination" option is more performant when used with CMS Filter.
Where?
Add to an element with fs-cmsload-element = "list"
Add this attribute
Description
Name
fs-cmsload-mode
Value
infinite
This option enables infinite scroll loading for your List. As the user continues scrolling down the page, more items will load.
IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.
IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.
Where?
Add to an element with fs-cmsload-element = "list"
More attributes to use
Below is a list of Attributes that can help you customize your load functionality
LOADER
I want this
Image, GIF, HTML Embed or Lottie Animation
to show the loading progress of the list
See how it works
Add this attribute
Description
Name
fs-cmsload-element
Value
loader
I want this element to be visible during the loading progress.
When items are loading on the page, this element will be visible. When items are not loading on the page, this element will be hidden.
When items are loading on the page, this element will be visible. When items are not loading on the page, this element will be hidden.
ITEMS COUNT
I want this
Text Block
to show the total number items in the Collection List
See how it works
Add this attribute
Description
Name
fs-cmsload-element
Value
items-count
This will show the number of total items in the list.
Regardless of the mode option used, items-count will show the total amount of items in your Collection.
If there are 125 items in the Collection, and there is no "Limit" set on the Collection List Settings, this text element will show "125"
Regardless of the mode option used, items-count will show the total amount of items in your Collection.
If there are 125 items in the Collection, and there is no "Limit" set on the Collection List Settings, this text element will show "125"
Visible COUNT
I want this
Text Block
to show the total number of visible items in the Collection List
See how it works
Add this attribute
Description
Name
fs-cmsload-element
Value
visible-count
This will show the number of total items that are currently visible in the list.
Useful for displaying the amount of items that the user can visibly see when using load-under or infinite list option with Load More.
This will not count filtered results that are behind a "Load more" button or an infinite scroll setup. This attribute only counts the amount of items that are visible in the user's UI.
Useful for displaying the amount of items that the user can visibly see when using load-under or infinite list option with Load More.
This will not count filtered results that are behind a "Load more" button or an infinite scroll setup. This attribute only counts the amount of items that are visible in the user's UI.
Visible COUNT from
I want this
Text Block
to show the "from" in the range of visible items
See how it works
Add this attribute
Description
Name
fs-cmsload-element
Value
visible-count-from
This will show the "from" value in the range of items that are currently visible in the list.
For example, if the list is currently showing items 4-10, this Text Block will show "4" as a value.
Useful for displaying the range of items the user can visibly see when using any mode option.
For example, if the list is currently showing items 4-10, this Text Block will show "4" as a value.
Useful for displaying the range of items the user can visibly see when using any mode option.
Add this attribute
Description
Name
fs-cmsload-element
Value
visible-count-to
This will show the "to" value in the range of items that are currently visible in the list.
For example, if the list is currently showing items 4-10, this Text Block will show "10" as a value.
Useful for displaying the range of items the user can visibly see when using any mode option.
For example, if the list is currently showing items 4-10, this Text Block will show "10" as a value.
Useful for displaying the range of items the user can visibly see when using any mode option.
Add this attribute
Description
Name
fs-cmsload-element
Value
empty
This element will show when there are no additional items to show.
This is similar to the "Empty" state for a Webflow CMS List.
This is similar to the "Empty" state for a Webflow CMS List.
Add this attribute
Description
Name
fs-cmsload-resetix
Value
true
If you are using interactions on Collection List Items (or any child of them), they won't work on the newly loaded items unless you apply this attribute to the Collection List.
Warning: When using this attribute, all interactions that have an Initial State will be restored to it, use with caution to avoid unexpected UX behaviors.
Warning: When using this attribute, all interactions that have an Initial State will be restored to it, use with caution to avoid unexpected UX behaviors.
Where?
Add to an element with fs-cmsload-element = "list"
Add this attribute
Description
Name
fs-cmsload-threshold
Value
-20
This option sets the threshold value in vh for when items in infinite load are loaded. Default value is -20.
The threshold value is relative to the distance between the bottom of the list and the bottom of the viewport.
Examples:
fs-cmsload-threshold = "-20" : The list will load items when there is a -20vh difference between the bottom of the list and the bottom of the window.
fs-cmsload-threshold = "50": The list will load items when there is a 50vh difference between the bottom of the list and the bottom of the window.
IMPORTANT: This attribute only works when fs-cmsload-mode = "infinite" is enabled for your Collection List.
The threshold value is relative to the distance between the bottom of the list and the bottom of the viewport.
Examples:
fs-cmsload-threshold = "-20" : The list will load items when there is a -20vh difference between the bottom of the list and the bottom of the window.
fs-cmsload-threshold = "50": The list will load items when there is a 50vh difference between the bottom of the list and the bottom of the window.
IMPORTANT: This attribute only works when fs-cmsload-mode = "infinite" is enabled for your Collection List.
Where?
Add to an element with fs-cmsload-element = "list"
Add this attribute
Description
Name
fs-cmsload-animation
Value
fade
This option customizes the animation effect of the loaded content.
The default animation is fade
Value options: fade, slide-up, slide-down, slide-right, slide-left, grow, shrink, spin
The default animation is fade
Value options: fade, slide-up, slide-down, slide-right, slide-left, grow, shrink, spin
Where?
Add to an element with fs-cmsload-element = "list"
Add this attribute
Description
Name
fs-cmsload-duration
Value
100
Change duration of the fade animation on the loaded Collection List.
Values are in milliseconds. Default is 100ms.
If you already have fs-cmsfilter-duration applied to the list, this attribute is not needed. Only one duration is needed.
Values are in milliseconds. Default is 100ms.
If you already have fs-cmsfilter-duration applied to the list, this attribute is not needed. Only one duration is needed.
Where?
Add to an element with fs-cmsload-element = "list"
Add this attribute
Description
Name
fs-cmsload-stagger
Value
200
This option adds a stagger animation to the items in the List. Items will animate in one-by-one in series. The value "200" is the time in milliseconds between each loaded item.
Where?
Add to an element with fs-cmsload-element = "list"
Add this attribute
Description
Name
fs-cmsload-cache
Value
false
By default, CMS Load caches the fetched documents for performance, and the cache doesn't expire until the site is re-published.
There are some times where you might want to opt out of this behavior, like when you programatically update your CMS Collections via the Webflow CMS API without manually publishing the site.
There are some times where you might want to opt out of this behavior, like when you programatically update your CMS Collections via the Webflow CMS API without manually publishing the site.
Where?
Add to an element with fs-cmsload-element = "list"
Advanced Pagination Features
OPTIONAL. These attributes are specifically for setting up a custom pagination interface. These attributes only work when the pagination option is used.
SCROLL ANCHOR
When the user switches between pages, I want the window to immediately anchor scroll up to this
Div Block
See how it works
Add this attribute
Description
Name
fs-cmsload-element
Value
scroll-anchor
Only works when using the pagination option. The page will anchor scroll to this element after the page changes.
Useful for improving ux of filter interfaces with many items. Anchor scrolling to the top of the page will assure the user is always seeing content from the top of the List.
IMPORTANT: This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element.
Useful for improving ux of filter interfaces with many items. Anchor scrolling to the top of the page will assure the user is always seeing content from the top of the List.
IMPORTANT: This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element.
PAGE BUTTON
I want this
Button, Link Block or Text Link
to serve as a template for page buttons in pagination mode
See how it works
Add this attribute
Description
Name
fs-cmsload-element
Value
page-button
This element is used as the template for custom pagination page buttons. If not added, pagination will work with the native Webflow Next and Previous buttons.
IMPORTANT:
This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element.
The element with the fs-cmsload-element = "page-button" must be inside a div block to work and load the other paginations buttons.
Current/active state state is managed by Webflow's 'current' state styling. To edit the current state of the page button, set the button url to the current page.
IMPORTANT:
This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element.
The element with the fs-cmsload-element = "page-button" must be inside a div block to work and load the other paginations buttons.
Current/active state state is managed by Webflow's 'current' state styling. To edit the current state of the page button, set the button url to the current page.
How to edit the current state:
PAGE DOTS
I want this
Div Block or Text Element
See how it works
used as the template for the dots in pagination mode
Add this attribute
Description
Name
fs-cmsload-element
Value
page-dots
This element is used as the template for the "..." pagination dots. Set this attribute to customize the style of those dots.
Without this attribute, the default for dots is <div>...</div>
You will only see dots if there are enough pages in your paginated list. If you only have a few pages in the pagination, the dots will not show. Page dots are added to the page when there are more pages in your pagination than the total sibling pages + the total boundary pages + the current active page. Dots show and hide intelligently based on the pages in your pagination.
IMPORTANT: This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element and fs-cmsload-element = "page-buttons" are added to the page.
Without this attribute, the default for dots is <div>...</div>
You will only see dots if there are enough pages in your paginated list. If you only have a few pages in the pagination, the dots will not show. Page dots are added to the page when there are more pages in your pagination than the total sibling pages + the total boundary pages + the current active page. Dots show and hide intelligently based on the pages in your pagination.
IMPORTANT: This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element and fs-cmsload-element = "page-buttons" are added to the page.
Option
PAGE SIBLINGS
I want to customize how many page buttons to show based on the active page in the pagination UI
See how it works
Add this attribute
Description
Name
fs-cmsload-pagesiblings
Value
1
Set the amount of pages in the pagination UI that are shown on each side of the active page.
The default value is 1.
The visual below will help with understanding this option.
IMPORTANT: This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element.
RESPONSIVE OPTION:
Customize the pagesiblings by breakpoint by using comma separated values for each breakpoint like this: fs-cmsload-pagesiblings = "desktop, tablet, mobile landscape, mobile portrait".
For example, fs-cmsload-pagesiblings = "3,2,1,1"
The default value is 1.
The visual below will help with understanding this option.
IMPORTANT: This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element.
RESPONSIVE OPTION:
Customize the pagesiblings by breakpoint by using comma separated values for each breakpoint like this: fs-cmsload-pagesiblings = "desktop, tablet, mobile landscape, mobile portrait".
For example, fs-cmsload-pagesiblings = "3,2,1,1"
Where?
Add to an element with fs-cmsload-element = "list"
Option
PAGE BOUNDARY
I want to customize how many page buttons to show on the ends of the pagination UI
See how it works
Add this attribute
Description
Name
fs-cmsload-pageboundary
Value
1
Set the amount of pages in the pagination UI that are shown as the first and last pages.
The default value is 1.
The visual below will help with understanding this option.
IMPORTANT: This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element.
RESPONSIVE OPTION:
Customize the pageboundary by breakpoint by using comma separated values for each breakpoint like this: fs-cmsload-pagesiblings = "desktop, tablet, mobile landscape, mobile portrait".
For example, fs-cmsload-pagesiblings = "4,1,2,1"
The default value is 1.
The visual below will help with understanding this option.
IMPORTANT: This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element.
RESPONSIVE OPTION:
Customize the pageboundary by breakpoint by using comma separated values for each breakpoint like this: fs-cmsload-pagesiblings = "desktop, tablet, mobile landscape, mobile portrait".
For example, fs-cmsload-pagesiblings = "4,1,2,1"
Where?
Add to an element with fs-cmsload-element = "list"
Option
Query Parameters
I want to show the native Webflow pagination query parameters (?4f82d9d6_page=2)
See how it works
Add this attribute
Description
Name
fs-cmsload-showquery
Value
true
Show native Webflow pagination query parameters when changing pages in pagination.
The default value is false.
Setting this attribute to true will add a query at the end of your url with the page parameter, like this https://websiteurl.com?4f82d9d6_page=2.
IMPORTANT: This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element.
Compatible with multiple CMS Load lists on the same page, both using query params. Compatible with showquery option in CMS Filter.
The default value is false.
Setting this attribute to true will add a query at the end of your url with the page parameter, like this https://websiteurl.com?4f82d9d6_page=2.
IMPORTANT: This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element.
Compatible with multiple CMS Load lists on the same page, both using query params. Compatible with showquery option in CMS Filter.
Where?
Add to an element with fs-cmsload-element = "list"
You may need multiple instances of this Attribute!
All of our attributes follow the same structure for multiple instances!
To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance.
Example of this solution:
Attributes that must have instances
Second instance example
Third instance example
fs-cmsload-element = "list"
fs-cmsload-element = "list-2"
fs-cmsfilter-element = "list-3"
fs-cmsload-element = "scroll-anchor"
fs-cmsload-element = "scroll-anchor-2"
fs-cmsload-element = "scroll-anchor-3"
fs-cmsload-element = "loader"
fs-cmsload-element = "loader-2"
fs-cmsload-element = "loader-3"
fs-cmsload-element = "items-count"
fs-cmsload-element = "items-count-2"
fs-cmsload-element = "items-count-3"
Working examples
See this solution working live in this Webflow project.
Example 1
Load more content with button
Showing 0 items
Rio de Janeiro
Brazil
Christ the Redeemer
Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.
Gujarat
India
Statue of Unity
Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel.
Arizona
United States
The Grand Canyon
The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.
Example 2
Load more content with Webflow pagination
Showing 0 items
Capri
Italy
Capri Island
Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.
New York
United States
American Museum of Natural History
Is a natural history museum on the Upper West Side of Manhattan, New York City.
Rome
Italy
The Vatican Museums
The Vatican Museums are the public museums of the Vatican City.
Example 3
Infinite load content during the scroll
Showing 0 items
Agra
India
Taj Mahal
The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.
New York
United States
Central Park
An urban park in New York City located between the Upper West and Upper East Sides of Manhattan.
San Francisco
United States
Golden Gate Bridge
The Golden Gate Bridge is a suspension bridge spanning the Golden Gate.
Combinations using CMS Load:
You can combine this Attribute with others to create more complex solutions.
Frequently Asked Questions
Everything you need to know about this attributes solution.
Infinite scroll makes elements to move erratically off the screen, any fix?
This is caused by the threshold that has been set for when the infinite scroll is triggered (fs-cmsload-threshold = -20) play around until you find a value that works best.
Is there a way to always show the Prev and Next buttons in Pagination, but have the inactive one greyed out?
This is not possible with the current system. We have built is specifically to show and hide based on if it’s needed on the page.
Is there a workaround on how to trigger embedded scripts for items that are not loaded on initial load?
Currently we do not support <script> tags inside collection items when using cmsload, give us some time to work on this.
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
