How to customize Pagination

📖 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.

On this page

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 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.

  1. 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.

  1. Page links: This is a standard pagination style that include 2 main parts: numbers that linked to each page of products and previous/next buttons.
  2. Load more: This pagination style replaces page links with a "Load More" button, which customers can click to display more products on the page.
  3. 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 group 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 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: button has text only
    • Icon only: button has 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
      • none  leaves the text’s case and capitalization exactly as it was entered.
      • lowercase  makes all of the letters in the selected text lowercase.
      • uppercase  makes all of the letters in the selected text uppercase.
      • capitalize  capitalizes 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:
      • none  leaves the text’s case and capitalization exactly as it was entered.
      • lowercase  makes all of the letters in the selected text lowercase.
      • uppercase  makes all of the letters in the selected text uppercase.
      • capitalize  capitalizes 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 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
      • none  leaves the text’s case and capitalization exactly as it was entered.
      • lowercase  makes all of the letters in the selected text lowercase.
      • uppercase  makes all of the letters in the selected text uppercase.
      • capitalize  capitalizes 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 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 support@boostcommerce.net.