Use this article to choose how shoppers move through a long collection — page by page, or by scrolling with products loading as they go — and to style the Load More button to match your storefront.
To set it up, go to Smart Collections → Template & Settings in your Rebuy admin, open the Collection Template Editor, then select Pagination under General Settings in the editor's left navigation. The mode you choose applies to every collection on your store.
This article is part of the Smart Collections Template & Settings documentation set — for a general introduction, see Smart Collections: Template & Settings Overview.
Choose how shoppers move through a collection
Smart Collections offers two pagination modes, presented as radio buttons. They are mutually exclusive, so exactly one is active at a time:
Mode | How it behaves for shoppers |
Paging (Default) | Splits the collection into numbered pages with next and previous navigation at the bottom. Shows 15 products per page unless you change it. This is the mode Smart Collections starts in. |
Continuous Scroll | Loads more products as the shopper moves toward the bottom of the page, with no page-by-page navigation. Products arrive in sets of 15. |
Selecting a mode reveals its own sub-controls, covered in the sections below.
Set how many products appear per page
In Paging (Default) mode, use Configure Amount Per Page to set how many products appear on each page. It accepts any whole number from 1 to 100 and defaults to 15; entering anything outside that range shows the validation message Value must be 1-100. The Paging radio's own tooltip confirms the starting point: Note: 15 products per page are displayed by default.
Choose Paging when you need a specific products-per-page count for performance or design reasons, or when you want shoppers to be able to change it themselves.
Let shoppers choose how many products to see
Still in Paging (Default) mode, tick Products Per Page Dropdown to give shoppers a per-page dropdown on the collection page so they can decide how many products to see at a time. Ticking it reveals Dropdown Options, three number inputs that define the values in that dropdown. The defaults are 15, 25, and 75, each input accepts a value from 1 to 100, and leaving an input blank removes that option from the dropdown.
Configure Amount Per Page is disabled while Products Per Page Dropdown is ticked. Once shoppers control the page size, the fixed count no longer applies, so the field greys out and the first Dropdown Options value takes over as the starting page size. Untick the dropdown to make Configure Amount Per Page editable again.
Add a Load More button to continuous scroll
In Continuous Scroll mode, one sub-control is available: the Load more button checkbox, which is unticked by default.
Unticked — the next set of products loads automatically as the shopper scrolls toward the bottom of the page.
Ticked — the shopper clicks a Load More button to load each set instead of products arriving automatically.
Ticking the checkbox reveals a Load More Button Text field that sets the button label. The default is Load More Products. The field cannot be left empty — clearing it shows the validation message Value is Required. The label you enter applies to every collection on your store.
Continuous Scroll always loads 15 products at a time
Continuous Scroll loads products in sets of 15, whether they arrive automatically on scroll or through the Load More button. The Continuous Scroll tooltip in the editor states this directly: When a shopper scrolls to the bottom of the results, additional results will appear for the shopper. Additional products will surface in sets of 15 products at a time.
This set size is fixed and there is no setting that changes it. If you need a different number of products per view, use Paging (Default) mode and set Configure Amount Per Page instead.
Style the Load More button to match your brand
The Styling card on the Pagination page controls the appearance of the Load More button on your collection pages, so you can match it to your storefront without writing CSS. Each control opens a color picker and starts from your Rebuy theme:
Button Text — the color of the button label.
Button Background — the button's background color.
Button Border Color — the color of the button border.
Because there is no Load More button to style in Paging (Default) mode, the Styling card does not apply there.
To restore your Rebuy theme colors, click RESET TO THEME at the bottom of the Styling card. Every styling value on the card is empty while it inherits your Rebuy theme, so RESET TO THEME stays greyed out until you set at least one of them; clicking it returns all of the card's values to your theme and greys the button out again. Each card in the editor has its own RESET TO THEME button, so resetting here does not affect the Product Display or Product Reviews cards.
To style the Load More button beyond these settings — a hover state or a font size, for example — add your own CSS in the editor's Custom CSS block. For ready-made selectors and examples, see Smart Collections CSS Guide.
Frequently asked questions
How many products per page can Smart Collections display?
In Paging (Default) mode you can display between 1 and 100 products per page, and the default is 15. You can also tick Products Per Page Dropdown to let shoppers pick for themselves from a dropdown whose default values are 15, 25, and 75. In Continuous Scroll mode products always load in sets of 15 and that set size cannot be changed. If you need a different number of products per view, use Paging mode and set Configure Amount Per Page.
What's the difference between Paging and Continuous Scroll in Smart Collections?
Paging (Default) splits the collection into numbered pages with next and previous navigation, and lets you configure how many products appear per page — 1 to 100, defaulting to 15 — with an optional per-page dropdown for shoppers. Continuous Scroll loads products in sets of 15 as the shopper moves down the page, with no page navigation, and that set size cannot be changed. Continuous Scroll also has a Load more button checkbox: leave it unticked so sets load automatically on scroll, or tick it so shoppers click a Load More button for each set. Choose Paging if you want shopper control or a specific per-page count; choose Continuous Scroll if you want a frictionless, mobile-style browsing experience.
How do I change the Load More button text in Smart Collections?
Go to Smart Collections → Template & Settings, open the Collection Template Editor, select Pagination under General Settings, choose Continuous Scroll, and tick Load more button. A Load More Button Text field appears below the checkbox. The default text is Load More Products, the field cannot be left blank, and the label you enter applies to every collection on your store.
Why is Configure Amount Per Page greyed out in Smart Collections?
Configure Amount Per Page is disabled whenever Products Per Page Dropdown is ticked. Once shoppers can choose their own page size from the dropdown, a single fixed count no longer applies, so the field greys out and the first value in Dropdown Options becomes the starting page size instead. Untick Products Per Page Dropdown to make the field editable again.
Can I use Paging on desktop and Continuous Scroll on mobile in Smart Collections?
No, Smart Collections applies one pagination mode across every device size — the two modes are mutually exclusive and there is no per-device pagination setting. The number of product columns per row can vary by device using Product Column Breakpoints on the Product Display page, but the pagination mode itself is uniform. See Smart Collections: Product Display Settings.