The premium version of the YITH Infinite Scrolling allows you to have a scroll effect on different pages of your site (e.g. the blog or the product loop), with the ability to customize these settings separately.
In the Sections tab you can create and name each section in which you want to apply the Infinite Scrolling effect. In this example, we will create a section and name it “Shop“.

For each section you can customize the following options, included the CSS selectors needed for the plugin to work. You have to configure the selectors in the plugin settings, as these change based on the theme you’re using and the section you want to enable the scrolling effect on (e.g. blog or product loop).

Event Type
Next, you can define an Event Type. This is the type of pagination for the content of the specified selection. You can choose between Infinite Scrolling, “Load more” Button and Ajax Pagination.

Infinite Scrolling
If you choose Infinite Scrolling, the contents of the next page are loaded scrolling the current page. Furthermore, you can decide if you want to use a default or custom loader in the Loader to use option.
When you select the Default loader, you will find four types of loaders to choose from. This will be the loader you want to show to your customers while they are scrolling and waiting for your products to load.

In this case, we have selected Loader 2. It will look like this in the frontend:

On the other hand, if you select Custom loader, it will override the previous one and you will be able to upload a custom loading image or enter a URL to it.

Load More Button
Another option available is the “Load more” Button, which allows you to load the content of the next page in Ajax by clicking on the Load more button. Here, you will find two more options to customize:
- Button Label: It allows you to set the button label.
- Extra Class of the Button: You can add a custom class to customize the button style.

This is what it will look like in the frontend, in this case we kept the Load More label:

Ajax Pagination
The third Event Type is Ajax Pagination which is added to the bottom of the current page. It will look this way:

Load Effect
The last option of the Sections tab is the Load Effect. Here you can select the type of animation to be used when loading new content:
