Tag: Magento 2 Infinite Scroll extension

Magento 2 Infinite Scroll Extension – User Manual

1.0 Introduction

Infinite scrolling loads web page content continuously as the user scrolls down the web page. Basically, infinite scrolling is the technique of web design to eliminates pagination from the website. Magento 2 Infinite Scroll Extension by Knowband does the same. It removes the pagination and page reload functionality from the website and make navigation easier for your Magento store visitors to view the next set of products without reloading the web page.

1.1 Features of Magento 2 quick scroll extension:

  1. Magento 2 Infinite Scroll extension replaces the pagination system from the website.
  2. Magento 2 fast scroll extension reduces the load time of the website.
  3. Store admin can enable or disable the Magento 2 infinite scroll module in a single button click.
  4. Magento 2 quick scroll extension offers sandbox testing option to the admin. After enabling this store admin needs to enter the specific IP address to test the module.
  5. Infinite scroll for Magento 2 extension serves better user experience.
  6. Magento 2 fast scroll module optimizes the navigation of the site.
  7. The admin can specify the number of pages after which, “Load More” will be shown. Store admin can also adjust the loader speed.
  8. Store admin can display end page message after the completion of the product listing.
  9. Magento 2 endless scroll extension works smoothly with list views as well as the grid view.
  10. Store admin can set the background color and text color of the end page message and go to the top link.
  11. Magento2 infinite scroll module offers the store admin to add the selector setting.
  12. Magento 2 infinite scroll module is mobile responsive.

2.0 Installation Steps of Infinite scroll for Magento 2 Extension:

The steps to install the Magento 2 quick scroll extension are mentioned below:

1. Buy the Infinite scroll for Magento 2 extension from Knowband. You can download the extension package.

2. The package has a zipped file that contains the user manual and the source code of Magento 2 Infinite Scroll Extension. Unzip the package.

3. Create a folder {Magento root}/app/code/Knowband/Infinitescroll

4. Upload the extracted content in the above folder via FTP manager (like Filezilla or WinSCP – download here: https://filezilla-project.org/).

5. Now run below commands to install the Magento 2 Infinite Scroll Extension:

php -f bin/magento module:enable –clear-static-content Knowband_ Infinitescroll
php -f bin/magento setup:upgrade
php -f bin/magento setup:di:compile
php bin/magento setup:static-content:deploy

php bin/magento cache:clean

6. The extension is now installed and ready for use. In Admin Panel go to “Knowband Extensions > Infinite Scroll”.

You can now configure and use the Magento 2 Infinite Scroll extension.

3.0 Admin Interface

Magento 2 fast scroll extension offers following interfaces to be configured:

magento-2-infinte-scroll-admin-interface

  1. General Settings
  2. Look and Feel Settings
  3. Selector Settings
  4. Sandbox Settings

Below is the detailed description of every setting:

3.1 General Settings

From this tab, store admin can adjust the general settings of the Magento 2 infinite scroll module.

  • Enable the extension: This tab of Magento 2 fast scroll will enable the infinite scroll option. The admin can enable/disable this Magento extension whenever needed.
  • Display End Page Message: This field of Magento 2 quick scroll extension allows the admin to enable/disable the message that would be displayed at the end of the product listing page.
  • End Page Message: This field of Magento 2 endless scroll extension allows the admin to set the text of the end page message that would be displayed at the end of the product listing page.
  • Display Go To Top Link: The Magento 2 infinite scroll module allows the admin to display the “Go To Top Link” option that helps the users to jump to the top of the product listing page.
  • Loading Message: This section of Magento 2 fast scroll extension offers the admin to set the text while loading the content of the web page.
  • Select Scroll Type: The Magento 2 quick scroll extension provides the admin to select the type of scrolling on product listing page. Following options are given in scroll type:

a. Infinite Scrolling

b. Load More Link

  • Load More Label: When “Load More Link” option is selected, this field will be shown. This field of Magento 2 infinite scroll extension let the admin to set the text on Load More link.
  • Frequency to show Load More text: This field of Magento 2 fast scroll extension will work only when “Scroll Type” is “Infinite Scroll”. This field allows the admin to set the frequency of load more link to be shown in the front-end.
  • Loader Delay: This field of Magento 2 infinite scroll module allows the admin to set the minimal number of milliseconds to stay in a loading state.
  • Negative Margin: This field of Magento 2 quick scroll extension will give you the ability to load the new items earlier before you reach to last item of the page. By default, the loader starts loading new items when the user scrolls to the last element of the page. The admin can set the number of products here. For instance, if the number ‘X’ is entered here, then, the loader will start loading before there are X number of products left in the web page.
  • Display Toolbar: This field of Magento 2 endless scroll extension will allow the admin whether to display the Toolbar on product listing page or not.

 

3.2 Look and Feel Settings

From this tab, the store admin can adjust the background and text color of the message box and go to top link.

  • Message Box Background Color: This tab of Magento 2 endless scroll extension offers the admin to set the background color of the message box.
  • Border Color: The Magento 2 Infinite Scroll extension allows the admin to customize the border color of the message box as per his preferences.
  • Text Color: The admin can customize the text color of the message box as per his choice. He can do the same just by selecting the color from the color picker.
  • Go To Top Link Background Color: This field of Magento 2 fast scroll extension allows the admin to set the background color of the “Go To Top Link”. Below is the screenshot of the Go To Top Link:


  • Custom CSS: If the admin wants to add the custom CSS for any element of Infinite scroll for Magento 2 extension, then, he can do the same by adding CSS in this field.
  • Upload Loader Image: This tab of Magento 2 endless scroll extension allows the admin to upload the loader image of his choice. The admin can upload .jpg, .png and .gif format images only. Image size should not be more than 2 MB.

3.3 Selector Settings:

  • Content: This tab of Magento 2 Infinite Scroll extension allows the admin to set the Class name of the Content container.
  • Next: This tab of Magento 2 fast scroll extension offers the admin to set the Class name of Next element.
  • Previous: This tab of Magento 2 quick scroll extension allows the admin to set the Class name of the Previous element.
  • Item Grid: This field of Magento 2 endless scroll extension allows the admin to set the Class name of Grid item.
  • Item List: This field of Magento 2 endless scroll extension allows the admin to set the class name of the list item.
  • Toolbar: In this field of Magento 2 infinite scroll module, the admin will have to set the Class name of the Toolbar.
  • Pagination: This tab of Magento 2 quick scroll extension allows the admin to set the Class name of the pagination container.

NOTE:

1. Don’t forget to add ‘#’ before id element and ‘.’ before the class element.
2. If you are not familiar with these selector elements please do not edit them.

3.4 Sandbox Settings:

The Sandbox Settings tab of the Magento 2 infinite scroll extension offers the admin to test the extension before implementing it on the site.

  • Activate: Enable this field of Magento 2 fast scroll extension to test the extension.
  • Authorized IP Address: In this field of Magento 2 quick scroll extension, enter the IP addresses on which you want infinite scroll active. Make sure that the entered IP addresses are separated by a comma. You can add the IP by clicking on “Add my IP” option.

4.0 Store Front-end

The Magento 2 endless scroll extension will be enabled on the whole website where pagination occurs. The  Infinite scroll for Magento 2 extension would appear at the front as follows:

End page message and top link:

Find more details about this Infinite scroll for Magento 2 below:

Magento 2 endless scroll extension Admin Demo

Magento 2 fast scroll extension Extension Front Demo

“Also, explore more Magento 2 Extensions for your store.”

How can Infinite Scroll benefit your eCommerce Site?

With the availability of multiple eCommerce stores, online shoppers have a number of options to choose from. But what leads to the decision making of the shoppers when it comes to choosing the best store among all? Can you guess?

It’s the User Interface. Apart from UI, it is the UX. Your website appearance is the first impression of your eCommerce store on your visitors. If it doesn’t look pleasing, you won’t be able to make your visitors stay on your store. A good user interface is followed by good user experience. If your UI is impressive but you are failing to provide a comfortable browsing experience to your visitors, you are probably not going to see them back on your store.

So, in order to provide customers with a smooth and pleasant experience, enhancing the user interface as well as the user experience is a must. Bridging the gap between the user experience and user interface is highly important for the success of an eCommerce store. E-commerce merchants use different tools and features on their web stores to make it more interactive and engaging. One such method to enhance the UI and UX of an eCommerce website is the Infinite scrolling.

Infinite scrolling, also referred to as Endless scrolling, eliminates the pagination process from your store by bringing the automatic and continuous loading. As a user scrolls downs the page, the product list continues to populate. As a result, users do not require to click on the next page to browse further.

The Infinite Scroll module by Knowband helps the eCommerce merchants get rid of the conventional pagination system. It adds an automatical scroll on the product listing page and enables the user to easily navigate through your store products, on a single page. If you run an e-commerce store on Prestashop, OpenCart, Magento or Magento 2, you can avail the benefits of this Infinite Scroll module. Try them out:

Infinite Scroll addon for Prestashop

OpenCart Infinite Scroll extension

Infinite Scroll extension for Magento

Infinite Scroll extension for Magento 2

Are you still sitting on the fence of whether to implement this infinite scroll feature on your store or not? Here are some of the compelling reasons that would help you make up your mind.

Infinite scroll is time-saving

As an e-retailer, your primary focus should be to maintain the user flow when they are present in your store. A pagination process can disturb the user flow and create frustration when users go through a number of pages. Infinite Scrolling, on the other hand, makes the browsing interesting and time-saving.

Infinite scrolling offers Easy browsing

One of the main advantages of infinite scrolling is that it makes browsing easy. With the automatic loading of products, the customers just need to scroll to find their desired product. But continuous scrolling, sometimes, can make a user dig so deep that it will be difficult to reach to the top of the page again. For this matter, the Infinite Scroll module contains a “Go to top” button to make a user easily navigate to the top section of the page.

Infinite Scrolling increases session duration

To be very true, users get bored and tired after browsing a number of pages. They do not even look further to see more results and take an exit from your store. This isn’t the case with Infinite Scrolling. When products are displayed continuously on a single page to the users, they browse more products and spend more time on your store, which helps in increasing the average time spent by a user on your site.

Infinite Scroll offers fast browsing

Customers prefer fast loading. They just hate to wait for the pages to load. Clicking on the next page several times and waiting for the page to load every time can irk your visitors. Infinite Scrolling overcomes this issue and keeps adding the next page content automatically. Users find this way more convenient.

Amazing for touchscreen devices

Touchscreen mobile devices are heavily dominating keypad devices over the last few years. Today, almost every user owns a touchscreen mobile phone. This is why Infinite Scrolling is considered to be the ideal way and preferred over pagination by e-commerce merchants. It gets so simple to just use a thumb to navigate to different pages. Facebook is a prime example.

Infinite Scrolling creates more user engagement

When the content gets loaded quickly, it makes a user stay longer on the page, hence increases customer engagement. Because of the continuous appearance of products, users find themselves interacting in your store for a longer period.

Conclusion

Customers love the Infinite Scrolling feature. It enhances their user experience and keeps them engaged in your store. I guess this is enough for you to make this feature available on your e-commerce store. Check out the Infinite Scroll modules and let me know the results that you obtain afterward.

Liked this article? You will like these too:

Pagination vs Infinite Scrolling

Infinite Scroll Optimization: You enroll while they Scroll