The infinite scroll is not working on debut theme

Shopify Partner
31 0 5

Hi guys,

I was trying to setup an infinite scroll on the product listing page on the fresh debut theme that shopify comes up with default. I have followed , a good tutorial to achieve the infinite scroll.

I have included the requried jquery library and added the code as suggested but there is a jQuery error on the console while scrolling and the feature didn't worked.

The error say "TypeError: jQuery.doTimeout is not a function".

This is weired because the same is working with simple theme. I have tested the same on theme "Simple" and it is working but not on "debut" theme.

Did someone faced the same and got the fix for it?

If someone with the genius could help me figure out why it is not working with debut theme that would be great!!

Thanks, Hoping for the support from shopify experts..



New Member
1 0 0

Navin, did you ever find a solution to your question? I also use the Debut theme and am trying to code for it to have the endless scrolling feature. 

3 0 4

We can simply add infinite  scroll using ajaxinate plugin and following  Steps:-
1. Download ajaxinate.min.js from next github link and place file in assets folder

ajaxinate.min.js in assets folderajaxinate.min.js in assets folder
2. Open templates/collection.liquid and place line 

{{ 'ajaxinate.min.js' | asset_url | script_tag }}

3. Open section/collection-template.liquid and add line 

   <div id="AjaxinateLoop" >
     {% for product in collection.products %}
and closing "   </div>"  tag after
  {% endfor %}.
I have added images below:
closing div.png
4. Replace pagination link code with new one
{%- if paginate.pages > 1 -%}
      {% include 'pagination'paginatepaginate %}
    {%- endif -%}
place/add :-
    <div id="AjaxinatePagination">
      {% if %}
        <a href="{{ }}">Loading More</a>
      {% endif %}
5. place java script code at the end of file section/collection-template.liquid to initiate plugin
document.addEventListener("DOMContentLoaded", function() {
  var endlessScroll = new Ajaxinate();
 Note : i have have added in grid view only . hope it will help someone

Usually, I don't recommend our users use infinite loading for product listing pages. There are some reasons, but the most aching problem is that it will make it very difficult to reach the footer of the page.

Basically, you have 3 options to implement your product lists:

  • Infinite loading
  • Pagination
  • Use "Load more" buttons

Among those options, the "Load more" button is the optimum solution. Users decide whether they need to view more products, but don't have to reload the whole page when they need to view more.

PageFly - Advanced Shopify Page Builder - Empowering 90.000+ active merchants.
Survive 2021 with top secrets from e-commerce leaders
New Member
2 0 2

@PageFly what if there could be a custom component that will show loading more.. and a ╳ button to cancel loading more products and this loading more shows only for 1/2-1 second and loads more products on the background.. then the friction that of clicking a button to load more products will also be removed and reaching the footer also wont be a difficult task.

Techie Person new to Shopify

Founder at The Pendu Store

New Member
2 0 2

It's working fine on my debut theme. Here are the steps I used for it:

1. Download the ajaxinate script (ajaxinate.min.js) from here: . You can find the required script file (ajaxinate.min.js) inside the dist folder.

2. Upload the script file(ajaxinate.min.js) like this in the shopify admin: Theme > Customize > Edit Code > Assets > Add a new Asset > Upload File

3. Follow exact steps as given by @kuldeepSekhon in this discussion from Step 2.

Alternatively, you can also refer to developer guide here:

After the pagination is working, I would recommend to do these additional steps to make it look better visually:

1. Create a file named custom.scss.liquid inside the Assets folder

2. Inside the Layout/theme.liquid search for scss, you will find a code line that adds theme.scss.liquid, similarly just below this line, add 

{{ 'custom.scss.css' | asset_url | stylesheet_tag }}

3. Now inside the custom.scss.liquid add these lines:

.pagination-load-more {
text-align: center;
margin-top: 24px;

4.  Change the code 

<div id="AjaxinatePagination">


<div id="AjaxinatePagination" class="pagination-load-more">


Now the loading more text will be centered.

Techie Person new to Shopify

Founder at The Pendu Store

18 1 6

@kuldeepSekhon Hi! First of all, thank you very much or your explanation!

I've followed it step by step, but in my case the "loading more" appears as a link, which takes you to a new page when you click... Do you know what could be the cause?

Best regards!

New Member
9 0 0


were you able to find a solve to it? I am also facing the same problem where loading more is reflecting as a link and when i click o it, it opens as a new page.

18 1 6

I've been using another theme for a while, and after many attempts I
resorted to paying an infinite scroll app.

Best regards