Skip to main content

Smart Search Results Page: Pagination

Choose how results are paged (default paging, per-page dropdown, continuous scroll, or load-more) and style the load-more button.

Written by Tom

Pagination controls how products are split into pages on the Smart Search Results Page, letting shoppers move through large result sets without waiting for every product to load at once. To choose the pagination style, go to Smart Search → Results Page in your Rebuy admin to open the Configure Results Page editor, then select Pagination from the editor's left navigation. This article is part of the Smart Search Results Page documentation set. For a general introduction, see Smart Search Results Page: Overview.

The Pagination settings in the Smart Search Results Page editor

(Screenshot above: The Pagination settings in the Smart Search Results Page editor)

Pagination options

The Pagination options on the Smart Search Results Page let you choose how products are paged as shoppers browse search results. Five pagination styles are available, each described in the following table:

Pagination style

How it works

Default Paging

Splits results into pages and shows 15 products per page by default.

Default Paging + Per Page Dropdown

Adds a dropdown that lets shoppers choose how many products to show per page. You can customize the dropdown options; the default options are 15, 25, and 75 products per page.

Default Paging + Fixed Products per Page

Lets you set a specific number of products per page, from 1 to 100, with no dropdown shown to shoppers. The default is 15 products per page.

Continuous Scroll

Loads more products automatically as the shopper scrolls down the page, with no traditional page-by-page navigation.

Continuous Scroll + Load More Button

Combines continuous scrolling with a Load More button that the shopper clicks to load more products on the same page. You can customize the button text; the default text is "Load More Products".

(Screenshot above: Rebuy Admin Smart Search "Results Page" editor — "Pagination" panel with "Paging (Default)" selected, a red box highlighting the checked "Products Per Page Dropdown" option with "Dropdown Options" set to 15, 25, and 75, and a pink arrow pointing from that setting to the resulting "Per page" dropdown showing 15 in the live results page preview)

Load More button styling

The Load More button styling settings let you match the Load More button to your storefront design without writing any CSS, so the button looks branded and consistent with the rest of your store. These settings apply to the Load More button used by the Continuous Scroll + Load More Button pagination style. The following styling options are available:

  • Button Text — a color picker that sets the color of the button's label text.

  • Button Background — a color picker that sets the button's background color.

  • Button Border — a color picker that sets the color of the button border.

  • Border Width — a slider that adjusts the thickness of the button border. The slider ranges from 0 to 24 pixels.

  • Border Radius — a slider that adjusts the roundness of the button corners. The slider ranges from 0 to 24 pixels; a higher value produces more rounded corners.

All of these Load More button styling settings default to your Rebuy theme, and you can override any of them. To restore the theme defaults, click Revert to Theme in the Styling section.

To style the Load More button beyond these settings, add your own CSS in the Results Page editor's Custom CSS block. For ready-made selectors and styling examples, see CSS Styling Tricks for Customizing Smart Search.

(Screenshot above: Rebuy Admin Smart Search "Results Page" editor — "Pagination" panel with "Continuous Scroll" selected, a red box highlighting "Load more button" checked with "Load More Button Text" set to "Load More Products", and "STYLING" options for button text, background, and border color, highlighting the resulting "Load More Products" button in the live search results preview)

Limitations

The Load More button styling settings are available only in the Results Page editor. You cannot style the Load More button from Smart Search Quick View or any other Smart Search surface — the Button Text, Button Background, Button Border, Border Width, and Border Radius settings appear only on the Pagination screen of the Results Page editor. To change any of them, open the Results Page editor, select Pagination from the left navigation, and use the Load More button styling settings described above.

Did this answer your question?