Overview


Entering a search term on a website can often return hundreds of results. For sites with a large product list or many categories, infinite scrolling (or endless scrolling) can be used to load products automatically as the user reaches the end of the page. This saves the user navigating through paging and provides a more seamless browsing experience. 


Step-by-step

You can implement infinite scrolling with one of two ways: 

  1. Automatic load - as the user scrolls to the bottom of the page, the next batch of products is automatically loaded with no action required from the user.  You can select to show a 'Loading more...' message.



  2. User-controlled load - when the user scrolls to the bottom of the page, they can click the 'Show More Products' button to view the next batch of products. 



Step-by-step guide

To enable Infinite Scrolling:

  1. In the CMS, go to ContentContent Standard Pages

  2. Select the Product List template.

  3. Locate the Product List Grid widget and click Edit.

  4. Toggle ON Use Infinite Scrolling? option and click Infinite Scrolling to expand the options.
     
  5. To set automatic or user-controlled scrolling, click the Infinite Scrolling tab.
  6. Set fields for the option you want.

    AutomaticValue

    Enable Click to Show More

    OFF

    Preload Data

    ON - all results will load in the background before page is in view

    OFF - results loads only when in view

    Infinite Scrolling Loading TextDisplays when more results are being loaded. Default: Loading more... 
    User-controlledValue

    Enable Click to Show More

    ON
    Click to Show More Products Button TextDefault: Show More Products 
  7. Click Save.


Additional Information



Minimum Version Requirements


Prerequisites


Self Configurable


Business Function


BPD Only?


B2B/B2C/Both


Third Party Costs



Related help