Pagination on a product listing page is a very common feature that we see on different eCommerce websites but this Prestashop infinite scroll module\u00a0will make the listing of products on the product listing page a bit more interesting. When this Prestashop list product module will be enabled the customer will just scroll down the page to view more products which are listed in the product listing page.<\/p>\n
2.0 Steps For Installation of Prestashop\u00a0infinite scroll module:<\/h2>\n
Once you purchase the infinite scroll addon, follow the below steps:<\/p>\n
- \n
- Go to the Store Admin -> Modules and Services.<\/li>\n<\/ol>\n
![\"prestashop-infinte-scroll-module-installation-step1\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinte-scroll-module-installation-step1.png\")
<\/a><\/p>\n2. Click on \u201c Upload a module\u201d. You can drag or drop the file or can simply select the file from the system.<\/p>\n
![\"prestashop-infinte-scroll-module-installation-step2\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinte-scroll-module-installation-step2.png\")
<\/a><\/p>\nOnce the file is completely uploaded,\u00a0a\u00a0notification\u00a0of\u00a0\u201cModule(s) installed successfully\u201d\u00a0will be displayed. Now you\u00a0can configure your module.<\/p>\n
3.0 Administration Module<\/h2>\n
In admin interface of the Prestashop infinite scrolling module, there will be following options to configure this Prestashop list view module. The Prestashop dropdown scrolling module includes 4 tabs and they are as follows.<\/p>\n
1. General Settings<\/strong><\/p>\n
2. Advance Settings<\/strong><\/p>\n
3. Display Settings<\/strong><\/p>\n
4. Selector Settings<\/strong><\/p>\n
Each section of the Prestashop Infinite Scroll plugin is described in details below.<\/p>\n
3.1 General Settings of the Prestashop\u00a0infinite scroll module:<\/h3>\n
This section of the Prestashop list product module will be having following options to configure this Prestashop infinite scroll module:
\n<\/a><\/p>\n![\"prestashop-infinte-scroll-module-general-settings\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinte-scroll-module-general-settings.png\")
<\/a><\/p>\n- \n
- Enable\/Disable:<\/strong> This option of the Prestashop fast scroll module will be having a toggle button with two specific values ON and OFF. This Prestashop module by Knowband will only work if this is set to ON. If this is set to OFF then none of the feature will be working and not even impacting any other section of website. By default, this option will be OFF.<\/li>\n
- Custom CSS and JS:<\/strong> These fields of the Prestashop Infinite Scroll module have been provided to let the admin change the look and feel of the front end of the Prestashop quick scroll module.<\/li>\n<\/ul>\n
3.2 Advance Settings of the Prestashop infinite scrolling module:
\n<\/a><\/h3>\n![\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinite-scroll-module-advance-settings\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinite-scroll-module-advance-settings.png\")
<\/a><\/p>\n- \n
- Display End Page Message:<\/strong> This field of the Prestashop drop down scrolling module offers the store owner to display the message at the end of product listing page.
\nIf the Owner enables Display End Page the following option will appear:<\/li>\n- Display Go To Top Link:\u00a0<\/strong>This field of the Prestashop Infinite Scroll module lets the store owner to display a link in the front-interface\u00a0to go to top of the page by displaying a button\u00a0at the bottom\u00a0of the page.<\/li>\n
- Display Loader while Loading:\u00a0<\/strong>This option of the Prestashop infinite scroll plugin offers the store owner to set display the loader during the loading of the product. So whenever customers scroll the page they can see a loader\u00a0while\u00a0loading the<\/li>\n
- Scroll Type:<\/strong>\u00a0The Prestashop\u00a0infinite\u00a0scroll\u00a0addon allows the store owner to choose between the scrolling option between the infinite scroll\u00a0and load more products link.
\nIf the Owner can select the Load More Link then there will be following Option:
\nShow More Link After:<\/strong>\u00a0The owner can set the frequency to show load more link i.e after this many page loads the link will appear.<\/li>\n- Sandbox Settings:<\/strong> Admin can also test the Prestashop\u00a0infinite scroll module by enabling this field.
\nIf the Owner enables Sandbox settings the following option will appear:<\/li>\n- Add IP:<\/strong> In this field of the Prestashop quick scroll module by Knowband, the admin can add different IP by separating them using a comma and the Prestashop module will work only for these IP addresses only.<\/li>\n<\/ul>\n
3.3 Display Settings of Prestashop\u00a0infinite scroll module:
\n<\/a>![\"prestashop-infinte-scroll-module-display-settings\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinte-scroll-module-display-settings.png\")
<\/a><\/h3>\n- \n
- Background color of the Message Box:<\/strong> This field of the Prestashop drop-down scrolling module allows the admin to customize the background color of the message box that would be displayed when all the products loading will done.<\/li>\n
- Text color of the Message Box:<\/strong> The Prestashop Infinite Scroll module allows the admin to change the text color of the message box.<\/li>\n
- Border color of the Message Box:<\/strong> The Prestashop infinite scroll module allows the admin to customize the border color of the message box as per his requirement.<\/li>\n
- Background color of Top Link:<\/strong> The admin can customize the background color of the Top Link of the Prestashop list product module.<\/li>\n
- <\/b>M<\/b><\/strong>essa<\/b><\/strong>ge and <\/b><\/strong>Top\u00a0<\/b><\/strong>link <\/b><\/strong>pre<\/b><\/strong>view:<\/b><\/strong>\u00a0<\/b><\/strong>Store admin can preview the\u00a0end page message and top link button design.<\/li>\n<\/ul>\n
The preview of the changes which will be done are reflected in the preview box given just below the fields of this Prestashop drop down scrolling module.<\/p>\n
3.4 Selector Settings of the Prestashop infinite scrolling module:<\/h3>\n
The values in this tab of the Prestashop dropdown scrolling module needs to be correct to let this\u00a0Prestashop quick scroll module work properly. The values in this tab of the Prestashop Infinite Scroll module may change according to the theme of the Prestashop used in the front.<\/p>\n
NOTE:<\/strong> If the selector values in these tabs of the Prestashop infinite scroll module are entered wrong then the Prestashop Infinite Scroll module will surely not work properly.
\n<\/a><\/p>\n![\"prestashop-infinite-scroll-module-selector-settings\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinite-scroll-module-selector-settings.png\")
<\/a><\/p>\n- \n
- S<\/b><\/strong>electo<\/b><\/strong>r Item<\/b><\/strong>:<\/b><\/strong>\u00a0<\/b><\/strong>Store admin can\u00a0enter the selector item\u00a0value from this\u00a0tab.<\/li>\n
- Se<\/b><\/strong>lec<\/b><\/strong>tor <\/b><\/strong>Contai<\/b><\/strong>ner:<\/b><\/strong>\u00a0Store admin can enter the selector container value from this tab.<\/li>\n
- S<\/b><\/strong>ele<\/b><\/strong>ctor<\/b><\/strong>\u00a0<\/b><\/strong>n<\/b><\/strong>ext<\/b><\/strong>:<\/b><\/strong>\u00a0Store admin can enter the selector next value from this tab.<\/li>\n
- Se<\/b><\/strong>lec<\/b><\/strong>tor pa<\/b><\/strong>g<\/b><\/strong>inatio<\/b><\/strong>n<\/b><\/strong>:\u00a0<\/b><\/strong>Store admin can enter the selector pagination\u00a0value from this section.<\/li>\n<\/ul>\n
4.0 Front\u00a0Interface of the Prestashop Infinite Scroll Module:<\/h3>\n
When the Prestashop infinite scroll module by Knowband is enabled from the admin panel then on every product listing page pagination of the products would not appear. The customer will be able to view all the products just by scrolling down on the page and if the display go to top link is enabled then the link will appear on the bottom right of the page to scroll the customer back to the top of the page.<\/p>\n
![\"prestashop-infinite-scroll-module-front-interface-1\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinite-scroll-module-front-interface-1.gif\")
<\/a><\/p>\nEnd Page Message:<\/h3>\n
- Se<\/b><\/strong>lec<\/b><\/strong>tor <\/b><\/strong>Contai<\/b><\/strong>ner:<\/b><\/strong>\u00a0Store admin can enter the selector container value from this tab.<\/li>\n
- Text color of the Message Box:<\/strong> The Prestashop Infinite Scroll module allows the admin to change the text color of the message box.<\/li>\n
- Display Go To Top Link:\u00a0<\/strong>This field of the Prestashop Infinite Scroll module lets the store owner to display a link in the front-interface\u00a0to go to top of the page by displaying a button\u00a0at the bottom\u00a0of the page.<\/li>\n
- Custom CSS and JS:<\/strong> These fields of the Prestashop Infinite Scroll module have been provided to let the admin change the look and feel of the front end of the Prestashop quick scroll module.<\/li>\n<\/ul>\n
- Enable\/Disable:<\/strong> This option of the Prestashop fast scroll module will be having a toggle button with two specific values ON and OFF. This Prestashop module by Knowband will only work if this is set to ON. If this is set to OFF then none of the feature will be working and not even impacting any other section of website. By default, this option will be OFF.<\/li>\n
![\"prestashop-infinite-scroll-module-front-interface-2\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinite-scroll-module-front-interface-2.gif\")
<\/a><\/p>\n![\"prestashop-infinite-scroll-module-front-interface-3\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/prestashop-infinite-scroll-module-front-interface-3.gif\")
<\/a><\/p>\n![\n<\/a>](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/04\/Prestashop-Infinite-Scroll_Display-Settings.png\"){kind=link}