Generally, customers have to browse multiple pages in search of the desired product on the website. However, this could lead to loss of time and even interest of customers too. OpenCart infinite scroll extension is the modern advancement to slow down pagination and provides seamless navigation of all the products on a single page. With the help of the dropdown scrolling module, customers can load the products of the next page on the current one just by scrolling down the page.<\/p>\n
OpenCart Infinite scroll extension enables automatic loading of pages without even scrolling down the page. It also helps to easily navigate through the product catalog. As all the products are available on a single page, customers need not to move from one page to another for the product.<\/p>\n
1.1 Striking Features of Infinite Scroll Extension for OpenCart<\/h3>\n
The OpenCart Infinite Scroll Extension provides you multiple features that are fully customizable and easy to configure from the backend interface without requiring any coding knowledge. The various striking features of the OpenCart Infinite Scroll Extension have been listed below:<\/p>\n
- \n
- The OpenCart fast scroll module enables automatic page loads and search results without scrolling down the page.
\nWith the help of the OpenCart quick scroll module, customers can navigate to the next page of product listing without reloading the next page.<\/li>\n - The OpenCart infinite scrolling plugin offers compatibility with SEO friendly URLs.<\/li>\n
- The OpenCart dropdown scrolling module gives a ‘Load More’ feature to pause infinite scroll after a definite interval of pages.<\/li>\n
- This page interval for load more feature can be set from the backend of the Infinite Scroll module.<\/li>\n
- Store admin can test the working of the Opencart infinite scroll module by enabling the sandbox\u00a0setting\u00a0and enter the specific IP address.<\/li>\n
- The admin interface of the OpenCart plugin is extremely easy to use and requires no use of coding knowledge to implement.<\/li>\n
- This OpenCart Infinite Scroll module offers a ‘Go to Top’ link feature to reach that start point of any product listing page.<\/li>\n
- OpenCart list view module provides SSL compatibility.<\/li>\n
- This OpenCart Infinite Scroll displays a loader while loading the next page products on the same page. This loader can be configured and disabled if required from the back-end interface.<\/li>\n
- Store admin can change the background and text color of the end page message and go\u00a0to the top link.<\/li>\n
- The OpenCart Infinite Scroll Module allows the admin to show a custom message to the customers after all the product listings have been loaded on the front.<\/li>\n
- Admin can choose to display the product listings in grid or list view format via OpenCart quick Scroll module.<\/li>\n
- This Infinite Scroll extension for OpenCart gives an option to include CSS and JS code from the back-office. Using the custom CSS and JS store admin can change the look and feel\u00a0of\u00a0the Opencart infinite scroll module.<\/li>\n
- The OpenCart infinite scroll module offers compatibility with all the OpenCart themes, so the admin can configure the look and feel of the infinite scroll as per their site theme.<\/li>\n
- The OpenCart fast scroll module offers multi-store compatibility.<\/li>\n
- The Opencart infinite scroll module offers the store admin to\u00a0set\u00a0the selector settings of the module like selector\u00a0pagination, selector container, etc.<\/li>\n
- The functionality of the OpenCart quick scroll module doesn’t conflict with any other installed modules of the store.<\/li>\n
- The Opencart infinite scroll module is mobile responsive.<\/li>\n<\/ul>\n
1.2 Technology for Development<\/h3>\n
Language: PHP
\nFramework: OpenCart<\/p>\n2.0 Installation Guide<\/h2>\n
To install this OpenCart Infinite scroll Module, please follow the following steps:
\nPurchase the OpenCart Infinite scroll Extension from the Knowband store. You\u2019ll get following files:<\/p>\n- \n
- Zipped File containing the source code of the OpenCart Infinite Scroll module.<\/li>\n
- User Manual of OpenCart Infinite Scroll plugin.<\/li>\n<\/ul>\n
Follow the steps below in order to install the OpenCart Infinite Scroll Extension in OpenCart store:<\/strong><\/p>\n
1.Unzip the zipped. You\u2019ll get the folders as shown in the image below:<\/p>\n
![\"picture1\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/03\/Picture1-10.png\")
<\/p>\n2.Copy all the files and folders of the zip file in the Root Directory of OpenCart setup via FTP manager.<\/p>\n
3.The OpenCart Infinite Scroll module is now installed and is ready to use. Go to Admin -> Main Menu -> Extensions as shown in the image below:<\/p>\n
![\"screenshot-opencartdemo-knowband-com-2019-03-20-11-15-14\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/03\/screenshot-opencartdemo.knowband.com-2019.03.20-11-15-14.png\")
<\/p>\n4.Select Infinite Scroll from the list of the modules and click on the\u00a0Edit\u00a0button as shown in the image below:<\/p>\n
3.0 Admin Interface of OpenCart Infinite Scroll Extension<\/h2>\n
OpenCart Infinite Scroll extension offers easy customization option to the store admin. The various configuration options are discussed in detail below:<\/p>\n
3.1 General Settings<\/h3>\n
Under this tab the store admin can\u00a0find the basic settings of the\u00a0module\u00a0and configure the module.<\/p>\n
![\"opencart-infinite-scroll-module-general-settings\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/03\/opencart-infinite-scroll-module-general-settings.png\")
<\/a><\/p>\n- \n
- Enable\/Disable:\u00a0<\/strong>Enable or disable the Opencart infinite scroll module in a single button click.<\/li>\n
- Custom JS:<\/strong> Enter custom JS accordingly.<\/li>\n
- Custom CSS:\u00a0<\/strong>Store admin can enter custom CSS to change the look and feel of the Opencart infinite scroll module.<\/li>\n<\/ol>\n
3.2 Advance Settings<\/h3>\n
From this tab the store admin can set\u00a0the advance settings of the Opencart infinite scroll\u00a0module.<\/p>\n
![\"opencart-infinite-scroll-module-advance-settings\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/03\/opencart-infinite-scroll-module-advance-settings.png\")
<\/a><\/p>\n- \n
- <\/b>Display End Page Message<\/b><\/strong>: Select Yes to display the end page message. If the store admin enables this\u00a0then an\u00a0end page message appears at the ending\u00a0of the products.<\/li>\n
- <\/b>Display Go To Top Link:\u00a0<\/b><\/strong>Select Yes to display Go to Top link.\u00a0If store admin enables this then a\u00a0go-to\u00a0top link appears\u00a0when the customer\u00a0scrolls the page.<\/li>\n
- <\/b>Display Loader While Loading:\u00a0<\/b><\/strong>Select Yes to display loader while loading.<\/li>\n
- <\/b>Scroll Type:\u00a0<\/b><\/strong>Select infinite scroll from the drop-down list to select scroll type.<\/li>\n
- <\/b>Sho<\/b><\/strong>w l<\/b><\/strong>oad mor<\/b><\/strong>e link <\/b><\/strong>afte<\/b><\/strong>r <\/b><\/strong>pa<\/b><\/strong>ges:\u00a0<\/b><\/strong><\/b>If store admin\u00a0selects the scroll type\u00a0as load more products link then store admin\u00a0has\u00a0to enter the number of pages after which load more link appears.<\/li>\n
- <\/b>Sandbox Setting:\u00a0<\/b><\/strong>Select Yes or No from the drop-down list for the Sandbox setting.<\/li>\n
- <\/b>A<\/b><\/strong>d<\/b><\/strong>d IP<\/b><\/strong>:\u00a0<\/b><\/strong>Store admin can add the specific\u00a0IP address\u00a0to test\u00a0the working of the Opencart infinite scroll module.<\/li>\n<\/ol>\n
3.3 Display Settings<\/h3>\n
Following are the settings listed under this tab:<\/strong><\/p>\n
![\"opencart-infinite-scroll-module-display-settings\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/03\/opencart-infinite-scroll-module-display-settings.png\")
<\/a><\/p>\n- \n
- Background Color of Message Box:<\/strong>\u00a0Select the background color of the message box.<\/li>\n
- Text Color of Message Box<\/strong>: Select the Text-color of the message box.<\/li>\n
- Border Color of Message Box:<\/strong> Select the border color of the message box.<\/li>\n
- Background Color Of Top Link:<\/strong> Select the background color of top link.<\/li>\n
- End Text:<\/strong> Enter the end text in either English or French language.<\/li>\n
- <\/b>Messa<\/b><\/strong>ge an<\/b><\/strong>d <\/b><\/strong>To<\/b><\/strong>p lin<\/b><\/strong>k previ<\/b><\/strong>ew: <\/b><\/strong>Store admin can the seethe preview of the\u00a0end page message and go to the top\u00a0link.<\/li>\n<\/ol>\n
3.4 Selector Settings:<\/h3>\n
From this tab the store admin\u00a0can set\u00a0the selector details\u00a0of the Opencart infinite scroll module.\u00a0Please do not edit these\u00a0settings if you are not fully sure\u00a0about it as modification in these settings may lead\u00a0to\u00a0improper working of the module.<\/p>\n
![\"opencart-infinite-scroll-module-selector-settings\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/03\/opencart-infinite-scroll-module-selector-settings.png\")
<\/a><\/p>\n- \n
- Selector Item:<\/strong> Enter the selector item.<\/li>\n
- Selector Container:<\/strong> Enter the selector container.<\/li>\n
- Selector next:<\/strong> Enter the selector next.<\/li>\n
- Selector pagination:<\/strong> Enter the selector pagination.<\/li>\n<\/ol>\n
4.0 Front End of the OpenCart Infinite Scroll Module<\/h2>\n
When the OpenCart list view 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. When all the pages are loaded a message appears in the bottom which states that all the pages are loaded now.<\/p>\n
![\"opencart-infinte-scroll-module-front-loader\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/03\/opencart-infinte-scroll-module-front-loader.gif\")
<\/a><\/p>\nGo\u00a0<\/b><\/strong>to t<\/b><\/strong>op lin<\/b><\/strong>k an<\/b><\/strong>d <\/b><\/strong>End <\/b><\/strong>p<\/b><\/strong>age <\/b><\/strong>m<\/b><\/strong>essage:<\/b><\/strong><\/p>\n
![\"opencart-infinite-scroll-module-front-interface\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/03\/opencart-infinite-scroll-module-front-interface.gif\")
<\/a><\/p>\n- \n
- Click here<\/a> for Module link<\/strong><\/li>\n
- Click here<\/a> for Admin Demo<\/strong><\/li>\n
- Click here<\/a> for Front Demo
\n<\/strong><\/li>\n<\/ul>\n5.0 Tutorial: Watch the Video Guide<\/strong><\/h2>\n
To help you set up and use the Knowband OpenCart Infinite Scroll extension, we have created a comprehensive YouTube tutorial. This step-by-step video guide walks you through the installation process, configuration options, and how to enable automatic product loading on your store for a smooth, seamless shopping experience.<\/p>\n
- Click here<\/a> for Admin Demo<\/strong><\/li>\n
- Selector Container:<\/strong> Enter the selector container.<\/li>\n
- Text Color of Message Box<\/strong>: Select the Text-color of the message box.<\/li>\n
- <\/b>Display Go To Top Link:\u00a0<\/b><\/strong>Select Yes to display Go to Top link.\u00a0If store admin enables this then a\u00a0go-to\u00a0top link appears\u00a0when the customer\u00a0scrolls the page.<\/li>\n
- Custom JS:<\/strong> Enter custom JS accordingly.<\/li>\n
- Enable\/Disable:\u00a0<\/strong>Enable or disable the Opencart infinite scroll module in a single button click.<\/li>\n