Menu Close
    Searching for an experienced Prestashop Development Company ?

    Prestashop Infinite Scroll

    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.

    Features

    • 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.

    Installation

    1. Go to Back office > Modules and Services > Upload a Module
    2. Drop or select your module zip file
    3. The module would be automatically installed
    Click to upload
    Drop or select module file
    Infinite scroll Module installed on Prestashop

    Module Configuration

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

    Configure infinite scroll module

    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.

    Configure general settings of infinite scroll
    • Products Layout – In this field, admin has to select the ‘Grid’ or ‘List’  view for the products on the product page.
    category page having grid view of products
    category page having list view of the products
    • 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.

    configure general settings for infinite scroll
    more products loading because of infinite scroll

    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.

    4-1

    Front End View

    load more button on category page

    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.

    5-1
    • 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.
    6-1
    Uploaded Custom GIF Image

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

    Front End View

    bubble animation type for infinite scroll
    Rotating type wheel for infinite scroll
    custom GIF image for infinite scroll
    • 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.
    end message when no products are available 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.
    scroll to top button

    Color Adjustment

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

    7

    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.

    8-1
    • Container selector – In this field, admin has to enter a selector for the products container which contains all the products.
    product container selector
    • Item Selector – In this field, admin has to enter the selector for a product. Products will load having the same selector and structure.
    product selector
    • Next page link selector – In this field, admin has to enter a selector for next link button in pagination block.
    next link button selector
    • 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.
    selector to hide pagination block

    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.

    9-1
    • Sandbox mode – If enabled, then admin can use infinite scroll for testing purpose on IP addresses mentioned in “Allowed IP addresses” field.
    10-1
    • 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.
    change background color of category block
    • Custom JS – Admin can create custom javascript and add it to the web page(s) in order to make it responsive.
    custom javascript added to category page

    Support

    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

    Blog Version - 1.7.x.x
    • Version 1.7.x.x
    • Version 1.6.x.x
    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    2 comments

  • ender
    hi, does this module work also with homefeatured module? and random products? need infinite scroll for categories with layered navigation and also for homefeatured random products.. thank you.
    • Anuj Verma (Moderator)
      Hello

      Thanks for contacting us

      Well, by default, this module ” Prestashop Infinite Scroll”, work in place of Pagination, (that is, automatically load the pages, when scrolling down).

      While the products displayed by the “Home featured module” are shown into a block on the Homepage, that block doesn’t have any pagination.

      Therefore, in order to provide the infinite scroll feature on the featured product block on the homepage, first, we need to customize and create the pagination flow on that block. Then after the module “Infinite scroll” will work with feature products as well.

      We’d request you to kindly raise a ticket at our support ticket system- https://webkul.com/ticket/ or you can mail us at [email protected] so we can further discuss this with you.

      Thanks and have a nice day!

  • Back to Top

    Table of Content

    Hide Index