Paginate List Collections

You have the option to paginate a list of collections and specify the desired number of items to display on each page of the collection list. This offers numerous advantages in terms of both collection design and page performance. Pagination allows you to:

• Show more than 100 collection Items from your collection in a single list
• Show fewer collection items per page to improve page performance and loading speed
• Establish custom dynamic sliders for showcasing latest arrivals, recent blog posts, products on sale, and more

What You Will Learn in this Tutorial

1. Paginating a list of collections
2. Understanding the structure of the pagination wrapper
3. Configuring pagination settings
4. Sharing the URL of a collection list page
5. Adding a second pagination wrapper within the same collection list
6. Exploring pagination and SEO
7. Troubleshooting common issues and FAQs
8. Creating a personalized pagination feature with numbered pages

Paginate a list of collections

To activate pagination for a specific collection list, navigate to the Element settings panel and select the Paginate items checkbox. Optionally, you can adjust the number of items to display per page.

Pagination Items (checkbox)

This checkbox provides the option to enable or disable pagination for the selected collection list. Disabling and re-enabling pagination will restore previous settings and component styles.

Page Count Indicator

This read-only text string displays the number of collection list pages to be generated based on the specified Items/page value.

Items/page (slider/number input)

This feature enables you to define the quantity of items to showcase per page in the collection list. The minimum value is 1, while the maximum is 100. Any changes made here will immediately reflect on the collection list in the workspace and update the page count indicator in the settings.

Understanding the structure of the pagination wrapper

Upon enabling pagination for a collection list, a new pagination component will be appended to the collection list wrapper. This can be viewed at any time in the Navigator. The component consists of two link blocks: the previous and next buttons.

When working on the canvas, the next button will appear if the collection list contains more items than the specified items/page value in the collection list settings. To view both the previous and next buttons, either switch to a different page using the pagination settings or click next in preview mode.

Configuring pagination settings

When the pagination wrapper is selected on the canvas, you can access the pagination settings within the Elements settings panel. Alternatively, you can directly interact with the settings on the canvas by pressing enter or double-clicking on the pagination wrapper.

Page Navigation

This pagination feature enables you to navigate to a specific page within the collection list using the dropdown menu, or move to the previous or next pages using the arrows. This functionality is beneficial for styling and customizing the previous and next buttons. It also facilitates previewing collection list pages directly on the canvas.

You can also preview and test the collection list pages along with the pagination buttons in preview mode.

Show Page Count

This setting allows you to display the current and total number of pages in your collection list. It introduces a new text block within your pagination wrapper that can be repositioned within the wrapper and styled like any other text block.

Sharing the URL of a collection list page

Each collection list page possesses a unique URL, enabling your website visitors to share a direct link to that specific page. For instance, if you encounter a friend’s image and information on an author’s page on a blog, and their details are located on page 3 of the authors’ list, you can easily share that precise page by copying the URL from the browser’s address bar.

Personalize and design the pagination buttons

You have the option to customize the pagination buttons just like you personalize any other button. Modify the icon’s color by setting a font color to either the icon itself or the button link block. Swap the icon with an alternative image from your asset panel. To maintain the default size and position of the icon, adjust your image’s width or height to 20px and include a right or left margin of 4px for spacing between the icon and text.

Include an additional pagination wrapper within the same collection list

You can replicate the pagination wrapper and position it anywhere within the collection list wrapper as long as it remains a direct offspring of the collection list wrapper.

For collection lists containing numerous items per page, adding a second pagination at the top of the collection list proves beneficial. You can drag the duplicated pagination list in the Navigator for precise placement.

Gain insights into pagination and SEO

Given the prevalence of paginated content online, search engines such as Google index paginated pages to deliver relevant results to users.

Optimized SEO configuration

You don’t need to manually index your paginated pages. Search engines handle this task automatically. Yet, if desired, you can assist search engines by specifying your paginated content.

References

• Signifying paginated pages with rel=“next” and rel=“prev”

Resolve known problems and FAQs

I’m unable to include more than 100 items per collection list page

By default, a collection list can exhibit a maximum of 100 items at once. This constraint serves performance purposes and aids in maintaining minimal page load times. To display over 100 items in a collection list, activate pagination. This enables showcasing all collection items across numerous pages. Nevertheless, for performance reasons, each collection list page can exhibit a maximum of 100 items.

The pagination buttons are not visible to me

The pagination buttons do not appear in two scenarios:

1. When a collection list comprises only a single item
2. When the count of items/page surpasses the total quantity of items in a collection list.

Solution for 1 — Ensure your collection list contains at least two items.
Solution for 2 — Decrease the value in the items/page field

Content from collection list pages is absent in Webflow site search findings

Merely the initial pagination page will be cataloged since it’s displayed without any query strings.

Cannot paginate Search results

Sustenance for the Search results list will be forthcoming shortly.

Can I prevent the page from reloading and jumping to the top when navigating through a paginated Collection List?

You can achieve this with tailored code. Refer to this guide for crafting a seamless pagination experience.

Craft a customized pagination with labeled pages

The current iteration of pagination introduces solely two buttons: “previous” and “next”. The capability to insert personalized page numbers and links is slated for future release. As a temporary solution, here’s a workaround utilizing Sliders and multiple collection lists:

1. Include a slider element
2. Opt for the Arrows and assign their display to none
3. Render the background color as transparent in the Styles panel (S)
4. Configure the slide nav to number labels in Element settings (D)
5. Insert a collection list into slide 1 and synchronize it with a collection
6. Construct and design your collection list
7. Optional: Establish a sorting order
8. Restrict the collection to exhibit only 3 items
9. Replicate the collection List
10. Pick slide 2 and paste the list
11. Set start at to 4

Slide 1 showcases items 1, 2, and 3. Slide 2 displays items 4, 5, and 6. If additional pages are necessary, replicate the slides and set the start at value for each collection list.