đ Pagination is an element used to separate your product list into smaller pages. It helps to improve the user experience, as customers can easily find the product or page they are looking for without having to scroll through a long list of products or pages.
â ď¸ This article only works for Boost AI Search & Discovery V3 new Theme settings. To find out which version of our app your store's current theme is installed with, please follow this article.
About Pagination
Pagination is a user interface element commonly found on websites and applications that display lists of content. It involves breaking down a long list of items into smaller, more manageable segments or pages. Users can navigate through these pages, typically by clicking on page numbers, "Next" and "Previous" buttons, or using other navigation controls. Pagination simplifies the browsing experience, making it easier to find and access specific items in a structured manner, especially when dealing with extensive datasets or content lists.
How to edit Pagination with the visual editor
Access Pagination settings
To access the Pagination settings, please follow these steps:
1. From the app's admin, go to Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.
2. Under the General settings section > select Toolbar to expand and choose Pagination in the drop-down list. Once you have chosen the Pagination section, the detailed settings for Pagination will appear on the right panel.
Styling configuration
Pagination types
There are 3 pagination types to choose from for your Collection pages and Search result pages.
These pagination types to choose from are Page links, Load more and Infinite scroll.
Page links: This is a standard pagination style that include 2 main parts: numbers that link to each page of products and previous/next buttons.
Load more: This pagination style replaces page links with a "Load More" button, which customers can click to display more products on the page.
Infinite scroll: This style loads more products automatically as the user scrolls down the page, creating a seamless browsing experience without clicking any buttons.
The pagination settings start with choosing the preferred type. Once you choose a specific type, the pagination section's settings will change accordingly.
Pagination type
Page links
Load more
Infinite scrollâ
Page links configuration
Once you choose Page links type, there are three main settings sections as below:
Pagination alignment
Align to left
Align center
Align to right
Show product count: Check this box to display the product count along with the pagination element.
Text description
Showing {{from}} - {{to}} of{{total}} products (in mobile & desktop)
Youâre viewing {{from}} - {{to}} of{{total}} products (only in desktop)
Product count position
Above
Below
Page number styles
You can determine how the page number will be displayed in this section. There are three main groups of elements you can customize as below:
Page number shape: you can select between the Circle and Square shapes.
Color
Number color: pick a color for the page number
Number color when selected: pick a color for the selected page number
Background color: pick a color for the background of page number shape
Background color when selected: pick a color for the background of page number shape when selected
Font
Font family: choose a font family for the page number
Font style: choose the preferred font style from the selected font family
Font size: use the slider or input your preferred size in pixels (range from 10 - 16)
Button styles
You can adjust the layout of the previous/next button in this section. These are the following elements you can customize:
Button type
Text with icon: button with text and icon
Text only: The button has text-only
Icon only: The button has icon icon-only
Note: Once you choose a specific button type, the following settings will change accordingly.
Text with icon
Previous text & Next text: Edit the text fields to modify the labels for the "Previous" and "Next" buttons.
Color
Text color: pick a color for the icon and the text of the button
Background color: pick a color for the background of the button
Background color on hover: pick a color for the background when hover on the button
Font
Font family: choose a font family for the label button
Font style: choose the preferred font style from the selected font family
Font size: use the slider or input your preferred size in pixels (range from 10 - 16)
Text
Text transform
noneleaves the textâs case and capitalization exactly as it was entered.lowercasemakes all of the letters in the selected text lowercase.uppercasemakes all of the letters in the selected text uppercase.capitalizecapitalizes the first letter of each word in the selected text.
Text only
Previous text & Next text: Edit the text fields to modify the labels for the "Previous" and "Next" buttons.
Color
Text color: pick a color for the text of the button
Background color: pick a color for the background of the button
Background color on hover: pick a color for the background when hover on the button
Font
Font family: choose a font family for the label button
Font style: choose the preferred font style from the selected font family
Font size: use the slider or input your preferred size in pixels (range from 10 - 16)
Text
Text transform: transform the text button to be:
noneleaves the textâs case and capitalization exactly as it was entered.lowercasemakes all of the letters in the selected text lowercase.uppercasemakes all of the letters in the selected text uppercase.capitalizecapitalizes the first letter of each word in the selected text.
Icon only
Button shape: you can select between the Circle and Square shapes
Color
Text color: pick a color for the icon of the button
Background color: pick a color for the background color of the button
Background color on hover: pick a color for background when hover on the button
Load more configuration
This pagination type replaces Page Links with a "Load More" button, which customers can click to display more products on the page.
There are two settings sections for Load More pagination: General & Button style.
General
Pagination alignment
Align to left
Align center
Align to right
Show product count: Check this box to display the product count along with the pagination element.
Text description:
Showing {{from}} - {{to}} of{{total}} products (in mobile & desktop)
Youâre viewing {{from}} - {{to}} of{{total}} products (only in desktop)
Product count position
Above
Below
Button styles
Button shape: you can select between the Rectangle and Rounded rectangle shapes for Load more button
Load more text: Edit the text fields to modify the labels for the "Load moreâ button
Color
Text color: pick a color for the icon of the button
Background color: pick a color for the background of the button
Border color: pick the color for the border of the button
Font
Font family: choose a font family for the label button
Font style: choose the preferred font style from the selected font family
Font size: use the slider or input your preferred size in pixels (range from 10 - 16)
Text
Text transform
noneleaves the textâs case and capitalization exactly as it was entered.lowercasemakes all of the letters in the selected text lowercase.uppercasemakes all of the letters in the selected text uppercase.capitalizecapitalizes the first letter of each word in the selected text.
Infinite scroll configuration
As users do not need to click any button to load more or go to the next page, there are no settings for the button in this pagination type.
Show product count: Check this box to display the product count along with the pagination element.
Text description
Showing {{from}} - {{to}} of{{total}} products (in mobile & desktop)
Youâre viewing {{from}} - {{to}} of{{total}} products (only in desktop)
Click the Save button to save all changes you have made.
Tutorial video
Watch our tutorial video to learn how to customize the Pagination section:
â
Should you have any questions or inquiries, please do not hesitate to reach out to our dedicated support team via [email protected].