# Magento 2 AJAX Infinite Scroll ### Installation and User Guide for Magento 2 AJAX Infinite Scroll **Table of Contents** - [Installation](#bkmrk-installation) - *Installation via app/code* - *Installation via Composer* - [Configuration Settings for Optimiser Base](#bkmrk-configuration-settin) - *General Settings* - [Configuration Settings for Infinite Scrolling](#bkmrk-configuration-settin-1) - *General Settings* - [Front-end Site View of Infinite Scroll](#bkmrk-front-end-site-view-) - *Infinite Scroll with ‘Load More Button’ on the Category Page* - *Infinite Scroll with Auto Loading on the Category and Search Pages* - *Auto Loading on the Category Page* - *Auto Loading on the Search Page* - *Infinite Scroll with ‘Load More Button’ and Page Number* ### Installation [](#bkmrk-) - **Installation via app/code:** Upload the content of the module to your root folder. This will not overwrite the existing Magento folder or files, only the new contents will be added. After the successful upload of the package, run below commands on Magento 2 root directory. ```php php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy ``` - **Installation via Composer:** Please follow the guide provided in the below link to complete the installation via composer.

[https://docs.scommerce-mage.com/magento-2-extensions/installation-via-composer/installation-via-composer](https://docs.scommerce-mage.com/magento-2-extensions/installation-via-composer/installation-via-composer)

### Configuration Settings for Optimiser Base [](#bkmrk--1) Go to **Admin > Stores > Configuration > Scommerce Configuration > Optimiser Base** #### General Settings [](#bkmrk--2) - **Enabled –** Select “Yes” or “No” to enable or disable the module. - **License Key –** Please add the license for the extension which is provided in the order confirmation email. Please note license keys are site URL specific. If you require license keys for dev/staging sites then please email us at . [![image.png](https://docs.scommerce-mage.com/uploads/images/gallery/2025-05/scaled-1680-/6okimage.png)](https://docs.scommerce-mage.com/uploads/images/gallery/2025-05/6okimage.png) ### Configuration Settings for Infinite Scrolling [](#bkmrk--4) Go to **Admin > Stores > Configuration > Scommerce Configuration > Infinite Scrolling** #### General Settings [](#bkmrk--5) - **Enabled -** Select “Yes” or “No” to enable or disable the module. - **Loading Type -** Select loading type “Load Automatically” or “Load with Button”. - **Button Label -** Enter button label. This will be shown only when the “Loading Type” is set to “Load with Button”. - **Button Label Font Color -** Set font color for "Load with Button" which appears on site front-end. - **Button Label Background Color -** Select button label background color. This will be shown only when the “Loading Type” is set to “Load with Button”. - **Button Label Size –** Define font size for the “Load with Button” which appears on the site. - **Display Page Numbers (Yes/No) –** Select “Yes” to show the page information on the side panel. - **Grid Dom Class –** This is the class for grid view of product listing pages. - **List Dom Class –** This is the class for list view of product listing pages. [![image (1).png](https://docs.scommerce-mage.com/uploads/images/gallery/2025-05/scaled-1680-/CYmimage-1.png)](https://docs.scommerce-mage.com/uploads/images/gallery/2025-05/CYmimage-1.png) ### Front-end Site View of Infinite Scroll [](#bkmrk--7) - **Infinite Scroll with ‘Load More Button’ on the Category Page –** You can display the “Load More Button” on the category page by selecting “Load with Button” option from **Admin > Stores > Configuration > Infinite Scrolling > Loading Type**. [![image.jpg](https://docs.scommerce-mage.com/uploads/images/gallery/2025-05/scaled-1680-/lINimage.jpg)](https://docs.scommerce-mage.com/uploads/images/gallery/2025-05/lINimage.jpg) - **Infinite Scroll with Auto Loading on the Category and Search Pages –** You can implement auto loading on the category and search pages by selecting the option "Load Automatically" from **Admin > Stores > Configuration > Infinite Scrolling > Loading Type**. - **Auto Loading on the Category Page** **[![image (1).jpg](https://docs.scommerce-mage.com/uploads/images/gallery/2025-05/scaled-1680-/ddsimage-1.jpg)](https://docs.scommerce-mage.com/uploads/images/gallery/2025-05/ddsimage-1.jpg)** ### [](#bkmrk--11) - **Auto Loading on the Search Page** **[![image (2).jpg](https://docs.scommerce-mage.com/uploads/images/gallery/2025-05/scaled-1680-/HBSimage-2.jpg)](https://docs.scommerce-mage.com/uploads/images/gallery/2025-05/HBSimage-2.jpg)** - **Infinite Scroll with ‘Load More Button’ and Page Number –** To display Load More Button with page numbers on category and search pages first select option “Load with Button” from **Admin > Stores > Configuration > Infinite Scrolling > Loading Type** and then select “Yes “ from **Admin > Stores > Configuration > Infinite Scrolling > Display Page Numbers**. This will display page numbers with Load More Button as shown in screen grab below. [![image (3).jpg](https://docs.scommerce-mage.com/uploads/images/gallery/2025-05/scaled-1680-/ymximage-3.jpg)](https://docs.scommerce-mage.com/uploads/images/gallery/2025-05/ymximage-3.jpg) If you have a question related to this extension please check out our [**FAQ section**](https://www.scommerce-mage.com/magento-2-infinite-scroll.html#customfaq) first. If you can't find the answer you are looking for then please contact [**support@scommerce-mage.com**](mailto:core@scommerce-mage.com).