Infinite Scroll
Let shoppers keep scrolling through category pages and search results instead of clicking page numbers.
Check it fits your store
Questions about compatibility? Contact us.
Details
Infinite Scroll adds the next page of products to the same list on category pages and quick search results, so shoppers keep browsing instead of paging.
Loading: automatically when the shopper nears the end of the list (also after a jump to the end of the page), with a limit of pages after which a Load More button appears so the footer stays reachable, or with the Load More button only. Each request follows the Next link of the theme's own pager, so layered navigation filters, sorting and the page size of the list are kept.
Progress and states: a progress line and bar under the list (for example "Showing 24 of 36 products"), the toolbar product count updated as products are added, a loading indicator, and an error message with Try again when a page cannot be loaded.
SEO: the pager and page size selector stay in the page HTML as crawlable ?p= links and are only hidden while infinite scroll runs in the browser. Optionally the address bar follows the last loaded page; opening such an address shows that page with a Load Previous button above the list that adds the earlier products.
Interactive products: on Luma, Magento initialises the widgets of the added products (Add to Cart, wishlist, compare, swatches); on Hyvä, Alpine.js initialises the components of the added product cards. The forms of loaded products get the visitor's form key, and their images load lazily.
Accessibility: screen readers hear how many products were added, keyboard focus moves to the first new product after a button load, and the animation respects reduced motion.
Luma and Hyvä: one package for both. On Hyvä store views (Hyvä Theme 1.3 or later, Hyva/default or a child theme) the same script runs without RequireJS or jQuery with the selectors of Hyvä's product list and pager, and a small plain CSS file is loaded only on list pages that use infinite scroll. It follows the Hyvä theme colours and can be restyled with CSS variables, without a Tailwind rebuild; the selectors can be adapted through layout XML for customised lists.
Managed in Stores › Configuration › Techimprovement › Infinite Scroll: category pages and search results on or off, loading mode, pages loaded automatically, address bar update and the button and progress texts, per store view.
Requirements
- Magento Open Source / Adobe Commerce 2.4.7 – 2.4.9; PHP 8.2 – 8.5
- Themes: Luma, Luma-based and Hyvä (Hyvä Theme 1.3+, Hyva/default or a child theme; tested with Hyva/default 1.5.3; no Tailwind rebuild needed)
- The theme's standard product list toolbar with page links (pager)
Change Log
Version 1.1.0 – October 30, 2026
New
- Hyvä theme support: on Hyvä store views (Hyvä Theme 1.3+, Hyva/default or a child theme) the layout handles hyva_catalog_category_view and hyva_catalogsearch_result_index swap in templates/hyva/loader.phtml. The same js/infinite-scroll.js runs as a plain deferred script from the data-ti-infinite JSON with the selectors of Hyvä's product list and pager (.products.wrapper > ul or the grid div of older releases, its children, a.pages-item-next/a.pages-item-previous without aria-disabled or .action.next/.action.previous, .toolbar-amount). Layered navigation, sorting and the page size keep working because every request follows the pager links of the current list; the pager stays in the HTML for search engines.
- Products loaded later are fully interactive on Hyvä: Alpine.js initialises their components (price box, image, wishlist, compare), their forms get the visitor's form key, and inline scripts inside loaded products are run where the Content Security Policy allows inline scripts (option activateScripts).
- css/infinite-scroll-hyva.css: plain CSS loaded only on Hyvä list pages that use infinite scroll; no Tailwind classes, follows the Hyvä colour tokens and can be restyled with the --ti-infinite-* custom properties.
- Layout argument selectors of block ti.infinite.scroll to adapt the Hyvä selectors to a customised list.
- ViewModel\InfiniteScroll::getHyvaConfigJson(), i18n/en_US.csv, unit tests for the Hyvä configuration.
- Event ti-infinite:loaded (bubbles from the product list, detail.items, detail.direction, detail.url) after each loaded page, for other scripts of the theme.
Improved
- js/infinite-scroll.js no longer needs jQuery for its own logic: one plain-JavaScript file for both themes. On Luma it is still a RequireJS module started by data-mage-init, and jQuery is only used to trigger Magento's contentUpdated event so mage/apply initialises the widgets of new products, as before.
- Pager links are requested and written to the address bar without their #fragment.
Fixed
- Forms of loaded products carry the visitor's form key (form_key cookie) instead of the one of the cached page they came from; images of loaded products are lazy-loaded.
- In automatic mode the next page also loads when the shopper jumps past the end of the list (End key, fast swipe, long footer on phones), not only when the end of the list scrolls into view.
Earlier versions (1)
Version 1.0.0 – October 24, 2026
New
- Infinite scroll for category pages and quick search results on Luma and Luma-based themes: the next page of the native pager is fetched and its products are appended to the list, initialised by mage/apply (add to cart, swatches and other widgets of the new products work).
- Loading automatically while scrolling (with a limit of pages before a Load More button appears) or with the button only; a Load Previous button when a later page is opened directly; optional address bar update to the last loaded page; progress text and bar; loading indicator; error message with Try again.
- Accessibility: live region announcements, focus on the first new product after a button load, reduced-motion support. The pager and page size selector stay in the HTML for search engines and visitors without JavaScript.
- Admin section Stores › Configuration › Techimprovement › Infinite Scroll with defaults and store view scope; cache cleaning on save; Setup\Uninstall removing the configuration rows.
- Unit tests for Model\Config and ViewModel\InfiniteScroll.
Compatibility
- Magento Open Source / Adobe Commerce 2.4.7 – 2.4.9 (verified on 2.4.9), PHP 8.2 – 8.5; Luma and Luma child themes. Hyvä themes are not supported (the module adds nothing there and the native pager stays); Hyvä support was added in 1.1.0.
Reviews
Be the first to review Infinite Scroll
Reviews are written by customers with an account. Sign in to tell others how it works on your store.
