Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Trusted by teams at
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Paginate Collection lists and manage their appearance across pages.
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:
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.
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.
This read-only text string indicates how many collection list pages will be generated based on the specified Items/page value.
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.
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.
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.
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.
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.
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 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.
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.
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.
Since paginated content is very common on the web, search engines, like Google, index paginated pages and return the most relevant results to searchers.
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.
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.
The pagination buttons won’t be visible in two cases:
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
Only the first pagination page will be indexed because that is the one that is shown without any query strings.
Support for the Search results list is coming in the near-future.
With some custom code, you can. Check out this tutorial on how to create a seamless pagination experience.
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:
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.
