All Collections
Widgets
Shopping Enhancers
How to Use the Infinite Scroll Widget?
How to Use the Infinite Scroll Widget?

A guide on how to use the Infinite Scroll widget.

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

What is an Infinite Scroll Widget?

The Infinite Scroll add-on is a great way to enhance the user experience on your website. This add-on removes the traditional pagination system, allowing for a seamless browsing experience for your users.

How Does the Infinite Scroll Widget Work?

The Infinite Scroll widget allows you to display all of your products on a single page. As the user scrolls down, more content is automatically loaded, eliminating the need for them to click to the next page. This creates a continuous browsing experience, making it easier for users to find what they are looking for.


How to Enable/Disable the Infinite Scroll Widget?

STEP 1

Sign in to your Debutify Theme log-in portal at debutify.com/login, and navigate to the add-ons section.

STEP 2

Choose your widget from the Add-ons menu, either by searching or filtering by category. Toggle the switch to enable or disable it.

STEP 3

When prompted to enable/disable a widget, click 'Enable' or 'Disable' to confirm your choice.

If the selected widget is not available in your current plan, you'll be prompted to upgrade. Click 'Upgrade' to proceed or 'Cancel' to continue without upgrading.


How to Manage the Infinite Scroll Settings?

STEP 1

In Shopify Admin, select Online Store.

STEP 2

Select your Debutify Shopify theme, and click on Customize.

STEP 3

Click on Theme Settings > Infinite Scroll. Under settings, click the button 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 4

If you use endless click, you have the option to loading button style.

Here is an example using Endless click.

Here is an example using Endless click.

STEP 5

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 6

Click Save to apply the changes.

Did this answer your question?