All Collections
Add-Ons
Shopping Enhancers
How to Enable the Infinite Scroll Add-On in the Debutify Theme?
How to Enable the Infinite Scroll Add-On in the Debutify Theme?

A guide on how to enable the Infinite Scroll add-on in the Debutify Shopify theme.

Diane Eunice Narciso avatar
Written by Diane Eunice Narciso
Updated over a week ago

What does the Infinite Scroll Add-On do?

The Infinite Scroll add-on removes the pagination on 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.

In this article:


How to Enable the Infinite Scroll Add-On

STEP 1

In Shopify Admin, select Online Store.

In 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

Click on the Theme Settings icon.

Click on the Theme Settings icon.

STEP 4

Click on Debutify Add-Ons.

Click on 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 Save to apply the change.

Click Save to apply the change.

How to Manage the Infinite Scroll Settings

STEP 1

In Shopify Admin, select Online Store.

In 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

Click on Theme Settings.

Click on the Theme Settings icon.

STEP 4

Click on Infinite Scroll.

Click on Infinite Scroll.

STEP 5

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.

STEP 6

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 can 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 7

Click Save to apply the changes.

Click Save to apply the changes.

Setting the number of products per row

STEP 1

Change from the Home Page to the Collections Page.

STEP 2

Click on the Collection pages section.

Click on the Collection pages section.

STEP 3

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 4

Click Save to apply changes.

Click Save to apply changes.

Related Articles

Did this answer your question?