What does the Infinite Scroll Add-On do?

The Infinite Scroll add-on removes the pagination in your site. You have the capacity to add all of the products on a single page and as the user keeps scrolling, more content is added automatically, without the need to click to the next page.

The Infinite Scroll add-on is available in Debutify 3.0.2 Shopify theme and later versions.

NOTICE: In Debutify 4.6.0 we made it easier to change the language of the Infinite Scroll add-on.

In this article:

  1. How to enable the Infinite Scroll add-on

  2. How to manage the Infinite Scroll add-on settings

  3. Setting the number of products per row


How to Enable the Infinite Scroll Add-On

STEP 1

Go to your Shopify Admin, select Online Store.

Go to your Shopify Admin, select Online Store.

STEP 2

Select your Debutify Shopify theme and click on Customize.

Select your Debutify Shopify theme and click on Customize.

STEP 3

Tap Theme Settings.

Tap Theme Settings.

STEP 4

Go to Debutify Add-Ons.

Go to Debutify Add-Ons.

STEP 5

Click on Infinite Scroll to enable the add-on.

Click on Infinite scroll to enable the add-on.

STEP 6

Click on Save to confirm changes.

Click on Save to confirm changes.

How to Manage the Infinite Scroll Settings

STEP 1

Go to Theme Settings and click on Infinite Scroll. Click here if you are using Debutify 4.6.0.

Navigate Theme Settings and click on Infinite scroll.

STEP 2

Under SETTINGS, tap Infinite Scroll options drop-down list and choose either Endless click or Endless scroll.

Endless click takes the place of paginations with a “Load more” button.

Endless scroll automatically loads items as you scroll down the page.

Under SETTINGS, tap Infinite scroll options drop-down list and choose either Endless click or Endless scroll.

STEP 3

If you use Endless click, you have the option to change the loading text and the loading button style.

If you use Endless click, you have the option to change the loading text and the loading button style.

Here is an example using Endless click.

Here is an example using Endless click.

If you use Endless scroll, you have an option to alter the loading image. Click on Select Image, choose an image and click on Select.

If you use Endless scroll, you have an option to alter the loading image. Click on Select Image, choose an image and click on Select.

Here is an example using Endless scroll.

Here is an example using Endless scroll.

STEP 4

Tap Save to apply changes.

Tap Save to apply changes.

Setting the number of products per row

STEP 1

Go to Collection pages and click on Collection pages.

Go to Collection pages and click on Collection pages.

STEP 2

Under the GRID section, enter your desired number of rows and products per row.

For Products per row (desktop), you may choose between 2 and 4.

For Products per row (mobile), you may choose either 1 or 2.

Under the GRID section, enter your desired number of rows and products per row.  For Products per row (desktop), you may choose between 2 and 4.  For Products per row (mobile), you may choose either 1 or 2.

STEP 3

Click Save to apply changes.

Click Save to apply changes.

Related Articles

How to Enable the Page Speed Booster Add-On in the Debutify Theme?

How to Enable the Page Transition Add-On in the Debutify Theme?

How to Use the Smart Search Add-On in the Debutify Theme?

Did this answer your question?