Premium Version Settings

With YITH Infinite Scrolling, you can show the content of multiple pages on a single page, the pagination will be disabled, and the content will load on the same page with an infinite scrolling effect, so your users will not see that they are loading a new page, but will always stay on the same page.
The items are loaded in Ajax and you can enable the scrolling effect on the blog and the shop pages.

The Premium Version allows you to enable Infinite Scrolling on as many sections as you want.

In the Plugin options section from the General Settings tab, you can enable and set the sections accordingly.

Within the same section, you will find the following options:

Enable Infinite Scrolling on mobile devices: Enabling this option will allow your customers to benefit from infinite scrolling on your e-commerce shop through their mobile devices.

Change the URL of the page whenever new items are loaded: By enabling the following option, you can implement a dynamic URL change based on the loaded page. This feature allows users to resume their browsing session from the point at which they left off, even if they navigate back to the main page with infinite scrolling. This is due to the fact that the position is registered when the back button is pressed.

Custom JavaScript: As you can see in the image above, you can add your custom JavaScript code to the bottom of the General Settings page. You can use two plugin triggers: yith_infs_adding_elem is triggered before the new elements are appended to the current content, while yith_infs_added_elem is triggered after the AJAX call ends.

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

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: