1.0 Introduction
Magento Infinite Scroll Module is a Magento extension incorporates the feature of infinite scroll in the site. When enabled, Magento Infinite Scroll extension makes changes in the product listing page. With the Magento fast scrolling, the store admin can remove the pagination from the category pages of the site. Magento quick scroll module even reduces the load time in refreshing the page everytime a visitor navigates to the next page. Magento Infinite Scroll Extension by Knowband also has the feature of load more link which can allow the store visitors to move directly to the top of the web page.
1.1 Merchant Benefits of Magento Infinite Scroll Module:
- The store admin can include the option of the infinite scroll with the help of Magento infinite scroll plugin with making any code changes.
- The Magento Infinite Scroll extension even allows the store admin to include the ‘Load More’ option on the site. With this, more products will be loaded only if the customers click on the link.
- The admin gets an option to change the look and feel of these features from the back-end of the Magento Endless Scrolling module.
- The Go to the Top link, allows the store visitors to move to the top of the web page. Even the appearance of this link can be changed from admin interface of Magento Infinite Scroll extension.
- The admin can either add or remove the toolbar from the front-end of the site.
- Magento Infinite Scroll module even offers the admin to set-up their sandbox site for the testing purpose.
2.0 Steps for Installation of Magento Infinite Scroll Extension
Follow the following steps for installing Magento Infinite Scroll Module:
1. Download the Magento extension package.
2. Unzip the package on your root folder of Magento setup via FTP manager (like Filezilla or WinSCP – download here: https://filezilla-project.org/).
3. In Admin Panel go to System > Knowband Extensions > Infinite Scroll.
4. That is all – Your system is ready.
3.0 Admin Panel
The Magento Infinite Scroll Module offers a number of easy customization options to the store admins. They are discussed in details below.
3.1 General Settings
The General Settings tab of Magento Infinite Scroll plugin has following options:
Active: Enables or Disables the Magento Product Auto Loading plugin on the storefront.
Display End Page Message: Enable to display the message at the bottom of the page.
End page Message: Set the text which is to be displayed at the bottom of the page.
Text on Next Button: Set text which is to be displayed on next button.
Display Go to top Link: Enable to show go to the top link at the left bottom of the page.
Loading Message: Set the message which is to be displayed when the content of next page is loaded.
Select Scroll Type: Select the type of scrolling whether infinite or load more link. When infinite scroll is opted, the feature of infinite scrolling will be enabled in the front-end. Whereas when the Load More option is selected, you will be required to enter following information.
Load More Label: Set the label text which is shown at load more link.
Frequency to show load more text: Set the page number from which load more link appears.
Display Toolbar: Enable it to display toolbar at product listing page.
3.2 Selector Settings
The Selector Settings tab of Magento Infinite Scroll extension is to set class name and id name of following option:
Content: Set the class name of container on which the loaded content is appended.
Next: Set the class name of next element.
Item Grid: Set the class name of the element on which product is shown if it is grid set .products-grid.
Item List: Set the class name of the element on which product is shown if it is list set .products-list.
Toolbar: Set the class name of toolbar element.
Pagination: Set the class name of pagination element.
Note: Leave the Selector Setting untouched if you are not familiar with the same.
Look and Feel Settings
The look and feel settings tab of Magento Infinite Scroll has the following options:
Message Box Background Color: Set the background color of the message box.
Border Color: Set the border color of the message box.
Text Color: Set the text color of message text.
Got to Top Link Background Color: Set the background color of the ‘Go to top’ link.
Custom CSS: option to add your own CSS code.
Include JQuery: Enable if the current theme does not have the jquery file.
3.4 Sandbox Settings
The Sandbox Settings tab of Magento Infinite Scroll is to enable this module on a particular IP.This tab has the following options:
Activate: Enable it to use sand box mode.
Authorized IP Addresses: Provide the multiple IP addresses separated by comma or you can add your IP by clicking on Add my IP button.
4.0 Store Front
The changes made from the back-end of the Magento Infinite Scroll will be incorporated in the front-end of the site as well. After enabling the Magento Infinite Scroll plugin the product listing page in the front of the shop will change a bit as the pagination is disappear and next page product is loaded by scrolling or as per the settings saved.
The Magento Infinite Scroll module at the front-end appears as follows:
Admin Demo Link: https://mademo1.knowband.com/index.php/endlessscroll/adminhtml_index/index/key/ac91efaa6d652ee58a922da7896dbb33/
Front Demo Link: https://mademo1.knowband.com/men/shirts.html
