Products listed in the search results, categories and content pages can be presented in pages of 12, 24 or 36 items per page. Going to a new page will reload the entire page.

However, it is possible to change the classic pagination method for a "load more" or "infinite scroll" that will use ajax to bring more products into the page turning the loading action a much quicker and user friendly process.

👍 Important: If you are running a custom design, your design may need changes to work with this feature. Test it throughly to be sure it's working with your design.

From your Admin in Store Settings / General / Store Preferences under Product Display you can change the type of product pagination you wish to use on your store:

When enabled, users will still be able to see on which page they are at all times

Once they scroll past the top section, a fixed bar will be displayed at the bottom to continue showing the current page in view:

The Load More option will wait for user input at all times. New products will be loaded with ajax once this button is clicked

Infinite scroll will automatically fetch for new products each time the user reaches the bottom section of the list

The bottom section always features a Show Footer button. This button is useful especially with infinite scroll when users are navigating through a category or search results page with many results and they decide to interrupt scrolling to go to the bottom of the page.

This button reveals the footer section at any time avoiding reaching the bottom of the page (that would request a new page of products)

👍 Important: If you are running a custom design, your design may need changes to work with this feature. Test it throughly to be sure it's working with your design.

No, if you are changing elements in the grid after page load, the same logic must be applied to the new elements by listening to the events product-loadmore-success

and product-loadmore-failed as described in https://docs.evolutionx.io/en/articles/4591648-storefront-javascript-events. These events when triggered will include in the details the list of SKUs of new products loaded so you can properly target them.

Search results, categories and content pages for both grid and list view on desktop and mobile.

The number of products fetched with each load is the number set for Default results per page in your Admin in Store Settings / General / Store Preferences / Product Display. Change that value to the default number of products per page and that is the number of products Load More / Infinite Scroll will fetch.

If a user opens a search results in page 3 for example, they will land on a page that will be displaying the products available on page 3 for the given result. If they keep scrolling / loading more, they will be getting more products for the following pages.

If the user wishes to see products from previous pages they can use the navigation buttons at the top to call for previous pages where they can go back to page 1 or the immediate page before.

Yes, you don't need to do anything, live data is called on a separate request. Live data will be fetched each time new products are loaded into the page. This method will allow users to keep scrolling and quickly see more products showing every time without having to wait for the live data to show. The usual spinners will be presented and the prices/inventory will be revealed once the request finishes. This is all asynchronous and each batch of new products will have its own independent request to fetch for its live data.