Paginate Collection lists

Paginate Collection lists and manage their appearance across pages.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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.

The check box for paginate items is checked for 1 page with 24 items per page. These settings are highlighted on the Collection list settings panel.
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.

A section of the navigator includes an expanded Collection list wrapper with a collection list, empty state, pagination (expanded). The Pagination wrapper includes a page button and a paginate button with an icon and text block element each.
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.

Two stylized rectangular buttons with a white fill, black outline, a blue directional arrow and text Previous (left) Next (right).
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.

The Pagination Settings panel includes a switch button to turn on "Show page count"
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.

A pagination wrapper containing a previous and next button with directional arrows. In between these two buttons is a page count 2 out of 31. All black characters on top of a white background.

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 _page=2 text of the URL is highlighted on a chrome window of the homepage of a architectural website called Unletro

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.

Different versions of stylized pagination buttons are laid out to show the types of customizations a user can produce. Blue buttons with directional arrows, buttons with the words previous and next and a slider with preview images of El Salvador are all included.
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.

Two pagination wrappers are highlighted on a Latest Posts page of a website. The first one is at the top of the page and the second is under three post thumbnails. The top buttons are only directional arrows, the bottoms buttons include the words Prev and Next.

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.

Can I stop the page from reloading and moving to the top of the page when navigating through a paginated Collection List?

With some custom code, you can. Check out this tutorial on how to create a seamless pagination experience.

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.

Two examples showing Slide 1 will displaying items 1, 2, and 3. Slide 2 will display items 4 and 5. The limit items checkbox is checked for both examples.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top