User Tools

Site Tools



For more details see how Infinite Scroll for Magento 2 extension works.

Guide for Infinite Scroll for Magento 2

Infinite scroll for Magento 2 automatically loads product catalog without reloading the page. Your customers will be pleasantly surprised with supportive navigation and high performance of your web store.

  • Smart navigation
  • SEO-friendly functionality
  • Customized navigation bars
  • Auto loading of the pages
  • 'Back to top' button

The extension offers you an enjoyable navigation and new opportunities in the presentation of goods. With this extension, the catalog browsing may become a smooth surfing experience. The module significantly saves time and nerves to your customers and consequently to yourself.

General Settings

To get the access to the “Infinite Scroll” settings please go to: Stores → Configuration → Amasty Extensions → Infinite Scroll

In the Loading Type field:

  • Select None - module is disabled if you want to deactivate the functionality of the Infinite Scroll extension.
  • Select Automatic - on page scroll to activate the autoloading of the previous and next pages. The next and previous pages will be displayed as soon as you reach the end of the current page. The AJAX plugin provides the progressive enhancement of the next and previous pages to the existing page without a complete page refresh.
  • If you select Button - on button click you'll have the next and previous pages loaded automatically but they will be displayed only after you click the button.
  • In case you choose the Combined - automatic + button, the first 'X number' of pages will be loaded automatically. After X pages, the user will have to load pages manually by pressing the button.
  • For Combined - button + automatic, the first 'Y number' of pages will be loaded automatically. Then, to load the next page, the user will need to click a button once. After that, all other pages will be loaded automatically.

Number of Automatically Loaded Pages

  • Enter the number of pages a user needs to scroll before 'Auto mode' applies. This setting is only available for Combined loading types: Combined - automatic + button and Combined - button + automatic.
What is the difference between automatic + button vs button + automatic?

Let's say, you set the number of automatically loaded pages as 4.

In the case of the Combined - automatic + button scenario, a user will see the first 4 pages similarly to a long one-pager. Then, to load the 5th, 6th, 7th, etc. pages, the user will need to press a 'Load More' button every time to load the page.

However, with the Combined - button + automatic user will be asked to press a 'Load More' button only once - between the 4th and 5th page.

In the Display Page Numbers field:

  • Choose Yes to display the pages separator with numbers. While scrolling down the list of products you will see the line separator with the page number. Select No to deactivate the separator and have the plain catalog list.

In the AJAX Progress Image Path field:

  • Insert the path to your own loading theme to customize your website. Choose what kind of loading wheels fits your web store layout.

Customize buttons

With the Infinite Scroll extension, you can customize buttons at your taste.

  • Insert the text for the button that leads to the next page.
  • Customize your Next page button by specifying all necessary CSS parameters.

To customize the buttons and bars, you can set location, size, shape, and color, etc.
  • Enable/disable the Info bar that displays the current page number and the total pages count.
  • Specify the background color and other CSS styles (e.g. width, height) for your Info bar.
  • Place the Info bar in the most appropriate place on your page by inserting the offsets in pixels.

In this section you can specify CSS classes of blocks after which the module should load products, toolbars and pager. This is sometimes needed when standard classes are removed from custom design themes.

Catalog pages with buttons

Infinite Scroll for Magento 2 is fully compatible with Improved Layered Navigation for Magento 2.

Take a look at the Infinite Scroll smart navigation on the catalog pages. Load next and Info bar will significantly improve the customer experience.

The Back to Top button will ease your catalog navigation. You may enable or disable the page separator.

Find out how to install the Infinite Scroll extension for Magento 2 via Composer.

Rate the user guide
 stars  from 6 votes (Details)
magento_2/infinite_scroll.txt · Last modified: 2020/07/17 10:27 by arhipenko