The infinite scroll is not working on debut theme

Shopify Partner
28 0 2

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. 

New Member
3 0 0

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.

- Tips to optimize website loadspeed:

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.