Magento 2 User Experience Extensions

  1. Home
  2. Docs
  3. Magento 2 User Experience Extensions
  4. Magento 2 Infinite Scroll
  5. User Guide

User Guide

1. Overview

In Magento 2 default, in product pages such as catalog or search result, pagination will be displayed at the end of each page as an option to load the next pages. With this function, users only can load the next page one by one. In general, it is not convenient for users if there are great numbers of pages. To optimize the searching experience for Magento users, BSSCommerce quickly develops Infinite Scroll for Magento 2 Extension- providing new functions that give admin more choices in setting up how to load the next pages: automatically load with Ajax when customers scroll down to the end of pages, free to customize Load More button/ Back to Top button, lazy loading image. Besides, admin can choose which categories the module will work for. Our extension will contribute to making your site become more professional and user-friendlier.

2. How Does It Work?

To make configuration of this module, follow this following instruction:

  • Step 1: Go to Admin Panel ⇒  Stores ⇒  Configuration
  • Step 2: At the left side of the page, find BSS Commerce select Infinite Scroll

There are 3 main parts you can fix as your wishes: General, Go To Top, Button Load More.

2.1 General Configs

  • In Enabled, choose Yes/ No to enable/ disable module
  • In Loading Icon, click button Choose File Select an image file from your computer location. This image will be used as icon displayed while loading product with Ajax. Click Delete Image if you want to use the default icon
  • In Show load more button pages, add a page number into this field. Once set up, when auto ajax loading till this page number, a button will be displayed for users to load the next pages manually.
  • If you set up this field to 0, there will be no Load More button.
  • If you set up this field to 1, Load More button will be displayed right on the first page. You can customize Load More button in the following box.
  • In Exclude Category, add the ID of categories which you don’t want the module work for

magento 2 infinite scroll

  • In Enabled Lazy Loading, choose Yes to enable Lazy Loading function, which will delay image loading until users scroll down to the images, which help enhance loading speed for your site
  • In Enabled Search Result Page, choose Yes to enable the module to work on the search result page

2.2 Button Go To Top

You can set up button Go To Top as wish in term of:

  • Guiding texts
  • Background color
  • Trigger
  • Location

magento 2 infinite scroll Speed

2.3 Button Load More

You can set up button Load More as your wish in term of guiding texts and background color for the button.

magento 2 infinite scroll

Was this article helpful to you? Yes No 1

How can we help?