Paginate Collection lists and manage their appearance across pages.
Pagination lets you limit the number of Collection items you want to show per Collection list page. With pagination, you can:
- display more than 100 Collection items from your Collection in a single Collection list
- display fewer Collection items per page for improved page load time and performance
- create custom dynamic sliders for latest arrivals, blog posts, products on sale, etc.
How to paginate a Collection list
To paginate a Collection list:
- Select the Collection list you want to paginate on the canvas
- Go to Element settings panel > Collection list settings
- Toggle Paginate items to on
- (Optional) Set the number of items you want to display per page in the Items field
You can also connect pagination settings to component properties to display different instances of a Collection item component with different pagination settings.
Note
You can show a minimum of one or maximum of 100 Collection items per page.
Once you enable pagination on a Collection list, a new Pagination element appears inside the Collection list wrapper, which contains two link blocks: the Previous and Next buttons. The Next button appears when the Collection list contains more items than the number of items per page set in the Collection list settings, and the Previous button appears on subsequent pages to let site visitors navigate between the pages of Collection items. You can also use the Preview dropdown in Collection list settings > Paginate items to preview a specific page of Collection list items.
To show the current page and the total page count in your Collection list, go to Collection list settings > Pagination settings and check Show page count.
Note
You can customize and style the Next and Previous buttons as desired in the Style panel. To change the color of the arrow icons, you can add a font color to the icon or the button link block. You can also replace the icon with any other image from the Assets panel. To maintain the default size and position of the icon, set the width or height or the image to 20px and add a right or left margin of 4px.
How to add a second pagination wrapper to the Collection list
For Collection lists with a large number of items per page, it may be valuable to add a second Pagination element to the top of the Collection list for more efficient navigation. You can duplicate the Pagination element and move it anywhere inside the Collection list wrapper. Note that you cannot drag the Pagination element outside of the Collection list wrapper.
How to create custom pagination with numbered pages
You can create custom pagination with numbered pages using sliders and multiple Collection lists. To do this:
- Add a slider element to the canvas
- Select the slider arrows on the canvas
- Go to Style panel > Layout and set Display to None for each arrow
- Select the slider on the canvas
- Go to Style panel > Backgrounds and set Color to transparent
- Go to Element settings > Slider settings > Slide Nav and confirm Number labels is checked
- Add a Collection list inside the Slide 1 element and connect it to a Collection
- Create and style your Collection list
- Go to Element settings > Collection list settings
- Toggle Limit items to on
- Set Show to 3
- Copy the Collection list and paste it inside the Slide 2 element
- Set Skip to 3 in the duplicated Collection list’s settings
Slide 1 will display items 1, 2, and 3 in your Collection, while Slide 2 will display items 4, 5, and 6. If you need more pages, you can duplicate the slides and increment the Skip value for each Collection list.
FAQ & troubleshooting
I can’t add more than 100 items per Collection list page.
To improve performance and accelerate page loads, a Collection list can show a maximum of 100 items at a time. You can enable pagination to show more than 100 items in your Collection list over multiple pages.
I can’t see the Next or Previous buttons in the Pagination element.
The pagination buttons aren’t visible when your Collection list only has one item or when the number of items shown per page is larger than the total number of items in a Collection list. You can address these issues by making sure you have at least two items in your Collection list and setting a lower number in the Items field.
Content from Collection list pages don’t appear in Webflow site search results.
Webflow site search indexes only the first pagination page.
Can I stop the page from reloading when navigating through a paginated Collection list?
You can create a more seamless pagination experience with custom code.