Prestashop Infinite Scroll

• Prestashop Infinite Scroll automatically loads products without the need of clicking additional page links.
• Choose the pagination type as scroll, view more, or both (scroll + view more).
• Replace the standard pagination links with the “View More” button and let users manually load the products with a button click.
• Enable automatic scroll for the first few pages and then display the “View More” button by selecting pagination type as both. This means the products will display continuously for a specified number of pages, then click on “View More” to load additional products.
• “Scroll to Top” button to allow users to easily scroll back to the top of the product list with a single click.
• Set a custom message to show at the bottom of the listing page when customers have browsed all the products.
• Configure the number of products to load per page when a user scrolls down on a category page.
• Use infinite scroll feature on the category page, Search Results, Best Sellers, Brands, Suppliers, New Products, On Sale.
• Choose from 3 pre-made loading animations or upload your GIF to show as a loader.
• Select the product layout as “List” or “Grid” from the back office.
• Change the look and feel of the end page message box by setting its text, background, and border color.
• Customize “Scroll to Top” and “View More” buttons.
• Customize the appearance of your site using custom CSS and JS.
• Selector settings for the users who use a theme other than the default Prestashop theme.

Note:
1- Prestashop Infinite Scroll module is compatible with PrestaShop framework version 8.x.x.
2- The module is Prestashop Multistore compatible.

• Firstly, go to the module manager in the back office and click on ‘upload a module’.
• After that, drag and drop the module file or select the file from the system.
• In this way, the module installation will be successful.

After the successful installation of module, admin can configure it by clicking on “Configure” button.

General Settings

Under “General Settings”, admin can set the products layout, pagination type, products per page, and configure ‘No more products message’ at the front end.

The admin can choose to use the infinite scroll feature on specific IP addresses for testing.

• Products Layout – In this field, admin has to select the ‘Grid’ or ‘List’  view for the products on the product page.

• Select pagination type – In this field, admin can select a way in which the products are loaded on the website.

If admin has selected scroll then the products will be automatically loaded when a user scrolls down on a product page.

Front End View

If admin has selected button, then a button appears on a product page when a user scrolls down by clicking on which more products get loaded.

Front End View

If admin has selected both(scroll and button) then a user can scroll down for a specified number of pages and then button appears by clicking on which a user can load more products.

• Select loader type – Admin can select a loading animation which will be visible at the front end when a user scrolls down and new items are loaded on a page. Admin can select bubble animation, rotating wheel, or upload a custom GIF image.

Note: You cannot delete a default custom image provided in “Infinite Scroll” module.

Front End View

• Products per page – In this field, admin has to enter the number of products which are loaded when a user scrolls down the products page. Setting products per page is a default Prestashop functionality, but if admin sets the ‘products per page’ from “Infinite Scroll” module then this will be applicable on the front end.
• No more products message – In this field, admin can set a message which will be displayed at the end of the page when all the products get loaded and there are no more products to show.

• Display ‘Scroll To Top’ button – If enabled, then a ‘scroll to top’ button is displayed on a product page by clicking on which a user reaches to the top of the page.

Color Adjustment

Under “Color Adjustment”, admin has various options to customize ‘view more’ button, ‘no more products’ message block, and ‘scroll to top’ button.

Selector Settings

If you use a theme other than the default Prestashop theme and your theme uses different selectors then you have to replace the selectors with the ones shown in the below screenshot so that your theme will be compatible with the infinite scroll module.

• Container selector – In this field, admin has to enter a selector for the products container which contains all the products.

• Item Selector – In this field, admin has to enter the selector for a product. Products will load having the same selector and structure.

• Next page link selector – In this field, admin has to enter a selector for next link button in pagination block.

• Pagination selector to be hidden – In this field, admin has to enter a selector to hide pagination block from the front end. Pagination block will be hidden when admin uses infinite scroll.

Advanced Settings

Under “Advanced Settings”, admin can enable the sandbox mode to test the ‘Infinite Scroll’ on specified IPs. Admin can create custom CSS in order to change the design of the web page as per the need. Admin can also create custom JS to make the web pages responsive.

• Custom CSS – Admin can create custom CSS to change the design of a web page. Admin can change the style in all the web pages using custom CSS.

• Custom JS – Admin can create custom javascript and add it to the web page(s) in order to make it responsive.

For any kind of technical assistance or query, please raise a ticket or send us a mail at [email protected]

Also, please explore our Prestashop development services and vast range of quality Prestashop addons.