Paginate collection lists

Learn how to paginate Collection lists.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!

You can paginate a collection list and specify how many items you want to show per collection list page. This has a lot of benefits both when it comes to designing your collections and performance of your pages. With pagination, you’ll be able to:

  • Display more than 100 collection Items from your collection in a single collection list
  • Display fewer collection items per page so the page performs better and loads faster
  • Create custom dynamic sliders for latest arrivals, latest blog posts, products on sale, and so on
In this lesson
  1. ‍Paginate a collection list
  2. ‍Understand the anatomy of the pagination wrapper
  3. ‍Configure pagination settings
  4. ‍Share the URL of a collection list page
  5. ‍Add a second pagination wrapper in the same collection list
  6. ‍Learn about pagination and SEO
  7. ‍Troubleshoot known issues and FAQs
  8. ‍Create a custom pagination with numbered pages

Paginate a collection list

To enable pagination on a selected collection list, go to the Element settings panel and check Paginate items. Optionally, you can change the number of items you want to display per page.

‍On the canvas, (1) select the Collection list you want to paginate – (2) open the Elements settings panel – (3) Check paginate items under Collection list settings – (4) specify the number of items/page.
On the canvas, (1) select the collection list you want to paginate – (2) open the Elements settings panel – (3) Check paginate items under collection list settings – (4) specify the number of items/page.
Paginate Items (checkbox)

This checkbox allows you to enable or disable pagination on the selected collection list. Disabling and re-enabling pagination will restore previous settings and component styles.

Number of pages indicator

This read-only text string indicates how many collection list pages will be generated based on the specified Items/page value.

Items/page (slider/number input)

This control allows you to specify how many items to show per collection list page. The minimum number you can specify is 1, the maximum is 100. The setting instantly affects the collection list on the canvas and updates the number of pages indicator in the settings.

Understand the anatomy of the pagination wrapper

Once you enable pagination on a collection list, a new pagination component will be added to the collection list wrapper. You can see this at any time in the Navigator. This component includes two link blocks: the previous and next buttons.

The pagination wrapper is added to the Collection list wrapper.
The pagination wrapper and its child elements are added to the collection list wrapper.

On the canvas, you’ll see the next button if your collection list has more items than the number of items/page you’ve specified in your collection list settings. To see both previous and next buttons, switch to a different page from the pagination settings or by clicking next in preview mode.

Pagination buttons
Note that the buttons in this image are styled. In the Designer, you'll see the default button styling before you style them yourself.

Configure pagination settings

When the pagination wrapper is selected on the canvas, you can see the pagination settings in the Elements settings panel. You can also access the settings right on the canvas by pressing enter or double-clicking the pagination wrapper.

Pagination settings
Page

This pagination setting allows you to go to a specific collection list page using the dropdown, or switch to the previous or next pages using the arrows. This is useful to gain access to the previous and next buttons when you want to style and customize these buttons. It also allows you to preview the collection list pages right on the canvas.

You can also preview the collection list pages and test your pagination buttons in preview mode.
Show page count

This setting allows you to show the current and total pages in your collection list. It adds a new text block to your pagination wrapper which you can move around within the wrapper and style like you would any other text block.

Collection list page count

Share the URL of a collection list page

Collection list pages have uniques URLs which allow your site visitors to share a direct link to that page. So, for example, if you happened to come upon a friend’s picture and info on a blog’s authors’ page, and it happens that their name appears on page 3 of the authors’ list, you’ll be able to share that exact page with them by copying the URL from the address bar.

The unique URLs of Collection list pages have the unique ID of the Collection list and page number appended at the end of the page’s URL like so: website.com/blog/?ef2f5b9e_page=2
These unique URLs have the unique ID of the collection list and page number appended at the end of the page’s URL like so: website.com/blog/?ef2f5b9e_page=2

Customize and style the pagination buttons

You can style the pagination buttons just like you would style any other button. You can change the color of the icon by applying a font color to the icon or the button link block. You can also replace the icon with any other image from your assets panel. To maintain the default size and position of the icon, you can set the width or height of your image to 20px and add a right or left margin of 4px to create a gap between the icon and the text.

Examples of custom pagination buttons
Examples of custom pagination buttons

Add a second pagination wrapper in the same collection list

You can duplicate the pagination wrapper and move it anywhere inside the collection list wrapper as long as it remains a direct child of the collection list wrapper.

For collection lists with a large number of items/page, it is useful to add a second pagination to the top of the collection list. You can drag the duplicate pagination list in the Navigator for precision.

Learn about pagination and SEO

Since paginated content is very common on the web, search engines, like Google, index paginated pages and return the most relevant results to searchers.

Advanced SEO setup

Again, you don't need to do anything to index your paginated pages, search engines take care of it for you. However, if you wish so, you can help the search engines by indicating your paginated content.

Resources

Troubleshoot known issues and FAQs

I cannot add more than 100 items per collection list page

By default, a collection list can show a maximum of 100 items at a time. This limit exists for performance reasons and to keep page load speeds to a minimum. To show more than 100 items in a collection list, enable pagination. This will allow you to display all your collection items over multiple pages. However, again, for performance reasons, each collection list page can only show up to a maximum of 100 items.

I cannot see the pagination buttons

The pagination buttons won’t be visible in two cases:

  1. when your collection list has only one item
  2. when items/page is larger than the total number of items in a collection list. 

Fix for 1 — make sure that you have at least two items in your collection list.
Fix for 2 —set a lower number in the items/page field

Content from collection list pages don’t appear in Webflow site search results

Only the first pagination page will be indexed because that is the one that is shown without any query strings.

I cannot paginate Search results

Support for the Search results list is coming in the near-future.

Create a custom pagination with numbered pages

The current version of pagination consists of only two buttons: “previous” and “next”. The ability to add customized page numbers and links will be coming in the future. For now, here's a workaround using Sliders and multiple collection lists:

  1. Add a slider element
  2. Select the Arrows and set their display to nonw
  3. Set the background color to transparent in the Styles panel (S)
  4. Set the slide nav to number labels in Element settings (D)
  5. Drop a collection list into slide 1 and connect it to a collection
  6. Create and style your collection list
  7. Optional: set a sorting order
  8. Limit the collection to show only 3 items
  9. Copy the collection List
  10. Select slide 2 and paste the list
  11. Set start at to 4

Slide 1 will display items 1, 2, and 3. Slide 2 will display items 4, 5, and 6. If you need more pages, duplicate the slides and set the start at value for each collection list.