User experience plays a vital role in eCommerce stores that can convert the users into customers. Therefore, maintaining a good user experience is important for optimum conversion rates. Magento 2 uses the traditional pagination method to display the products on your store which can be tedious for the users that are browsing products on your online store. In case you have plenty of products listed on the store, the users have to click the next button frequently to load the next page of products while browsing.

1. Infinite Scroll for Magento 2 © Meetanshi
Infinite Scroll for Magento 2
User Guide
Table of Content
1. Extension Installation Guide
2. Configuration
3. Load Prev-Next Button Settings
4. Back to Top Button Settings
5. DOM Selectors
6. Infinite Scroll in the Frontend

2. Infinite Scroll for Magento 2 © Meetanshi
1. Extension Installation
• For Magento Marketplace Customers
o Find the Composer name and version of the extension in the extension’s composer.json file.
o Login to your SSH and run:
▪ composer require meetanshi/magento-2-infinite-scroll
o Enter your authentication keys. Your public key is your username; your private key is your
password.
o Wait for Composer to finish updating your project dependencies and make sure there
aren’t any errors.
o To verify that the extension installed properly, run the command:
▪ php bin/magento module:status Meetanshi_InfiniteScroll
o By default, the extension is probably disabled.
o Enable the extension and clear static view files:
▪ php bin/magento module:enable Meetanshi_InfiniteScroll --clear-static-content
▪ php bin/magento setup:upgrade
▪ For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
▪ For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
▪ php bin/magento cache:flush
• For Meetanshi Customers
o Extract the zip folder and upload our extension to the root of your Magento 2 directory via
FTP.
o Login to your SSH and run below commands step by step:
▪ php bin/magento setup:upgrade
▪ For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
▪ For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
▪ php bin/magento cache:flush

3. Infinite Scroll for Magento 2 © Meetanshi
2. Configuration
For configuring the extension, login to Magento 2, move to Stores → Configuration →
Meetanshi → Infinite Scroll where you can find various settings to enable and configure the
extension.
• Infinite Scroll: Enable the Infinite Scroll extension from here.
• Loading Type: Select one of the scroll types to show products on the category page.
o Automatic – on page scroll: Automatically loads products on page scroll.
o Button – on button click: Loads the products on click of next or previous buttons.
o Combined – automatic + button: Firstly, loads products automatically until the defined
pages and then loads the products on button click. For example, “Number of Automatically
Loaded Pages” is set to 2, the users will see the first 2 pages loaded automatically as a long
one-pager and then, to load the other next pages, the users will need to press a 'Load
Next' button every time.
o Combined – button + automatic: Firstly, loads products on button click and then loads
the products automatically on scroll. For example, “Number of Automatically Loaded
Pages” is set to 2, the users will see the “Load Next” button between 2nd and 3rd page, and
the other next pages will be loaded automatically.
• Number of Automatically Loaded Pages: Enter the number of pages to be autoloaded for
the “Combined” type option above.
• Display Page Numbers: Set YES to show page numbers above the products loaded on the
category page.
• Page Numbers Display Style: Select one of the page number display styles if the above
option is set to Yes.
o Button: Shows page number in a button.
o Text with Divider: Shows page number as text with a divider.
o Text with Background: Shows the page number as text with background.
• AJAX Loader Image Path: Enter path to the loader image to show when the products are
loading.

4. Infinite Scroll for Magento 2 © Meetanshi
3. Load Prev-Next Button Settings (Optional)
The extension facilitates to show “Load prev” and “Load next” buttons if selected any of the
button related “Loading Type”.
• Label for the Prev Button: Enter label for the button users require to click to load previous
products.
• Label for the Next Button: Enter label for the button users require to click to load next
products.
• Button Color: Set the color for the next-prev load buttons.
• Button Color (Pressed): Set the color for the next-prev button after it’s clicked.
4. Back to Top Button Settings
The extension facilitates to show Back to Top button at the bottom of the page so that on click,
users can scroll to the top of the page.
• Enabled: Enable back to top button from here.
• Button Style for Desktop: Select one of the button display styles for the desktop.
o Arrow Only: Shows button with arrow.
o Arrow and Text: Shows button with arrow and “Scroll to Top” text.
o Vertical sticky button with arrow and text: Shows a vertical sticky button with arrow
and “Scroll to Top” text.
• Button Style for Mobile: Select one of the button display styles for the mobile.
o Arrow Only: Shows button with arrow.
o Arrow and Text: Shows button with arrow and “Scroll to Top” text.
• Button Color: Set the color for the back to top button.

5. Infinite Scroll for Magento 2 © Meetanshi
5. DOM Selectors
For the custom theme users, enter DOM selectors for product groups, product link and footer.
6. Infinite Scroll in the Frontend
After the extension is configured successfully, infinite scroll is enabled on the category page in
frontend.
• Button type infinite scroll with button page number display style

6. Infinite Scroll for Magento 2 © Meetanshi
• Automatic scroll type with button page number display style

7. Infinite Scroll for Magento 2 © Meetanshi
• Button type with button page number display style

8. Infinite Scroll for Magento 2 © Meetanshi
• Automatic + Button type with text with divider page number display style

9. Infinite Scroll for Magento 2 © Meetanshi
• Button + Automatic type with text with background page number display style