Pagination styles
Five more ways to move through products without page reloads, on top of Free's infinite scroll and Load More button, with their own colors and labels.
- AJAX Pagination card with the Pagination Style cards
- Pagination Design card for the selected style
- Live Preview in the sidebar
Pagination Style
| Style | What shoppers get |
|---|---|
| Free Loading Mode (default) | The mode chosen on the General tab (infinite scroll or the Load More button), plus Pro's extras. |
| Hybrid | Loads automatically a few times, then shows the button. |
| Numbered AJAX Pages | Keep page numbers; switch pages without reloading. |
| Previous / Next | A compact pager that switches pages without reloading. |
| Load More + Show All | A Load More button plus a button that loads every remaining product. |
| Infinite with Page Markers | Infinite scroll with a "Page 2", "Page 3" divider between pages. |
The style applies to every archive unless an archive rule chooses another. The Appearance tab's Load More button, indicator and messages are still used.
The Pagination Design card, right below, shows only the settings for the selected style. Free Loading Mode, Hybrid and Numbered AJAX Pages have no design settings, so the card shows a short note instead. Hidden settings keep their values.
Hybrid
Products load automatically as shoppers scroll for a set number of pages, then the Load More button takes over so they can reach your footer. Switching to another page or changing a filter restarts automatic loading.
How many pages load automatically before the Load More button takes over. Shown only while Hybrid is selected.
Numbered AJAX Pages
Your theme's page numbers stay. Clicking one swaps the products, the page numbers and the "Showing 17–32 of 40 results" count without reloading. Back and Forward switch pages, screen readers hear "Page 2 loaded.", and Ctrl/⌘-click still opens a page in a new tab. After each switch, the top of the product list is scrolled into view (below any sticky header) and keyboard focus moves there. With Prefetch the Next Page on, hovering or focusing a page number preloads it. No extra design settings.
Previous / Next
- "← Previous", "Page 1 of 4", "Next →" under the products
Replaces your theme's page numbers with a pager under the products. It behaves like Numbered AJAX Pages: pages switch without reloading, Back and Forward work, and the list scrolls into view. Previous is disabled on the first page and Next on the last. On phones, "Page 1 of 4" sits above two equal buttons.
| Setting | Default | Options |
|---|---|---|
| Button Background · Button Text | #111827 · #ffffff | |
| Button Hover Background · Button Hover Text | #2563eb · #ffffff | Also used by the Show All button |
| Button Corner Radius (px) | 6 | 0–50 |
| Page Status Color | #4b5563 | The "Page 1 of 4" text |
| Previous Label · Next Label | Previous · Next | |
| Page Status Text | Page %1$s of %2$s | %1$s = current page, %2$s = number of pages |
| Button Content | Arrow and text | Arrow and text, Arrows only, Text only |
| Pager Alignment | Center | Center, Left, Right, Spread to both edges |
| Full Width Buttons | Off | Previous and Next share the full width of the product list |
| Show Page Status | On | Off hides the "Page 1 of 4" text between the buttons |
Load More + Show All
An outlined Show all products button sits next to Load More and loads every remaining page in turn (up to 50 pages), then announces "All products loaded." and moves keyboard focus to the first new product. It's hidden once everything is loaded. It has the same shape as your Load More button, and with Free's Text button style it becomes a text link too. Best for catalogs with a moderate number of products.
| Setting | Default |
|---|---|
| Show All Label | Show all products |
| Show All Button Color | #111827 (outline and text) |
| Button Hover Background · Button Hover Text | #2563eb · #ffffff (hover fill) |
Infinite with Page Markers
Infinite scroll with a full-width divider before each newly loaded page, so shoppers know how far they've gone.
| Setting | Default | Options |
|---|---|---|
| Page Marker Style | Text between two lines | Text between two lines, Rounded badge, Text only |
| Page Marker Text | Page %s | %s = page number |
| Page Marker Color | #6b7280 |