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 auto loading 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 complete page refresh.
  • If you select Button - on button click you have the next and previous pages loaded automatically but they will be displayed only after you click the button.

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 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 to 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 5 votes (Details)
magento_2/infinite_scroll.txt · Last modified: 2020/04/03 17:23 by tihomirova