Appearance

Infinite Scroll Configuration ​

The Infinite Scroll functionality enhances the product listing experience by automatically loading more items as users scroll, eliminating the need for pagination and improving navigation and user engagement.

Overview ​

Infinite Scroll replaces pagination on category product listing pages and search pages. The feature dynamically loads additional product listings as users scroll down, appending new products to the list automatically via AJAX calls to the backend.

Key Features:

  • Replaces traditional pagination with seamless scrolling
  • Configurable pages per scroll event
  • "Load More" button appears after every second load
  • Full integration with Layered Navigation
  • Responsive design across all devices
  • Compatible with native Magento category templates
  • Fixed product count per page when enabled

Configuration ​

Configure the Infinite Scroll feature through the Magento admin panel.

Configuration Options:

  • Infinite Scroll Enabled - Toggle the feature on or off
    • Yes - Enables infinite scroll functionality
    • No - Uses traditional pagination (default)
  • Pages per Request - Define how many pages worth of products to load per scroll event
    • Default: 1 page per request
    • Custom: Set number of pages to load simultaneously

Configuration Path: Stores > Configuration > Settings > Magebit > Infinite Scroll

Example Configuration:

  • Set Infinite Scroll Enabled to "Yes"
  • Set Pages per Request to "2"
  • Save configuration and clear cache

When enabled, users initially see page 1 of products. As they scroll to the bottom, products from subsequent pages load automatically, creating a seamless experience.

Functionality ​

Basic Operation ​

The Infinite Scroll feature dynamically loads additional product listings as users scroll down category pages. Instead of clicking through numbered pagination, new products are appended to the list automatically through AJAX calls that retrieve the next set of products and inject them into the DOM.

The feature is built to be modular, performant, and respects Magento's layered navigation and toolbar logic. It ensures compatibility with native filtering and sorting features, preserving Magento's core functionality while improving user experience.

Load More Button ​

After every second load, a "Load More" button is displayed, which loads the next page's products. This provides users with explicit control over loading additional content when needed.

Layered Navigation Integration ​

The Infinite Scroll feature is fully compatible with Magento's Layered Navigation (filters on the left sidebar). When users select filters (e.g., color, price, or size), the filtered product results are loaded using AJAX, maintaining the same infinite scroll behavior.

Search Results Support ​

In addition to category pages, Infinite Scroll also works on catalog search results pages. When users perform searches using Magento's built-in search bar, the results page supports infinite loading just like category listings.

Users can scroll down to continuously load more matching products without navigating through numbered pagination. This is particularly useful for stores with large catalogs, where search results often span many pages.

Performance Considerations ​

Caching ​

Pages are cached for improved performance. Next time you load the same pages, they will be loaded much faster, reducing server load and improving user experience.

Product Count Management ​

When infinite scroll is enabled, users cannot select the amount of products per page. This is determined by the page administrator by setting the value in Stores > Settings > Configuration > Catalog > Catalog > Storefront.

Store View Configuration ​

Changes apply at the store view level, allowing flexible control across different storefronts or languages. Administrators can enable or disable the feature per store view, providing granular control over the infinite scroll functionality.

Extensibility ​

The infinite scroll feature is easily extendable with theme customizations, allowing developers to modify behavior and appearance according to specific project requirements.