Not so long ago, users had no choice but to navigate from one page to another to find the desired products on eCommerce store.
Today, customers don’t like to wait. Clicking on the pagination links to view more products can be annoying for the users. If the users won’t see the needed products on the store instantly, they will become frustrated and may leave your store.
Thanks to Prestashop Infinite Scroll that replaces the standard pagination on product listing pages with an efficient and user-friendly infinite scrolling feature. This extension automatically loads the products when the users scroll down. Allow your customers to easily navigate through catalog products by integrating endless scroll on product listing pages.
Besides the automatic loading option, Prestashop Infinite Scroll offers the store owners with manual loading option. The store owners can enable the “View More” button in case they don’t want the products to load automatically. View More button is a button at the bottom of a collection page that enables users to load more products.
Improve the catalog browsing experience and boost visitors’ session duration by integrating the infinite scroll feature with your online store.
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.
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/.