View Product Page

Sections

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“.

Sections

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).

Shop section

Navigation Selector: The selector that contains the navigation of this section.

Navigation Selector

Next Selector: The selector of the link that redirects to the next page of this section.

Next page selector

Item Selector: The selector of the single item in the page.

Item selector

Content Selector: The selector that contains your section content.

Content selector

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.

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.

Default loader

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

Loader 2 on 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.

Custom loader

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.
Load more

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:

Ajax Pagination in frontend

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:

Load effect