Forget the slow pagination system and load more products automatically when the user scrolls down the page. This module helps you in decreasing the bounce rate of your store by making the users stay longer on your page.
- Set the product layout type as Grid or List view.
- Products from the next page get automatically loaded when the user scrolls down the listing page.
- Enable a “View More” button by clicking on which more products get loaded on the page.
- Keeps your users more engaged on the store by loading more products every time they scroll down.
- Set the number of products to be loaded per page when the user scrolls down.
- “Scroll to Top” button by clicking on which a user gets back to the top of the page from anywhere on the page.
- When reached at the end of the listing page a message will be displayed conveying to the user that there are no more products to show.
- Various options to customize “View More” and “Scroll to Top” buttons.
- Add custom CSS to improve the design of the web pages of your store.
- Add custom JS to make the web pages of your store responsive.
- User can view all the products of a category on a single page.
- A user does not have to navigate from one page to another page to view products resulting in enhanced user experience.
- Go to Back office > Modules and Services > Upload a Module
- Drop or select your module zip file
- The module would be automatically installed
After the successful installation of module, admin can configure it by clicking on “Configure” button.
Under “General Settings”, admin can set the products layout, pagination type, products per page, and configure ‘No more products message’ at the front end.
- 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.
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.
Under “Color Adjustment”, admin has various options to customize ‘view more’ button, ‘no more products’ message block, and ‘scroll to top’ button.
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.
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.
- Sandbox mode – If enabled, then admin can use infinite scroll for testing purpose on IP addresses mentioned in “Allowed IP addresses” field.
- 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.
That’s all for Prestashop Infinite Scroll still have any issue feel free to add a ticket and let us know your views to make the module better http://webkul.uvdesk.com/.
Current Product Version - 5.0.1
Supported Framework Version - 1.7.x.x