Infinite Scroll (endless scrolling)

Jervis_Atagana
New Member
1 0 0

Hi,

 

I urgently need help figuring out how to create an endless or infinite scroll for the products in the collections on our site. We have thousands upon thousands of products so one collection can have 30 pages which is annoying and causes frustration for us and our customers. The theme we are using is "Supuply" . I have contacted Shopify and they and their coders could not do it for me. I have seenthe discussion and link that I listed below but i was undable to get them to work. Ideally, there would be a "Load more" button when scrolling, but anything is better than what we have now. 

Has anyone found a solution ( I can somewhat do some htm editing, but an app would work well too)? I also have reached out and posted to Shopify Experts and have yet to get anything.

What I found that did not work: http://www.davecap.com/post/9675189741/infinite-scroll-for-shopify-collections

                                                 https://ecommerce.shopify.com/c/ecommerce-design/t/infinite-scrolling-supply-theme-405728

Thanks,

Jervis

Replies 44 (44)
FueledByPizza
Shopify Partner
26 0 7

Hello Jervis,

We recently released an app that adds endless scrolling to the collection page.

If you are still using the theme "supply" the app will auto install so you do not need to do any coding in order to get it to work.

here is the link if you still need it: https://apps.shopify.com/endless-scrolling-by-fbp

If you run into any problems please let me know and I will help 🙂

- Paul

- Paul G | Lead Developer @ FueledByPizza
Cam-
Shopify Expert
178 0 44

This free theme plugin by our team at Elkfox is awesome https://elkfox.github.io/Ajaxify/

Free, powerful, flexible. What more could you want? ?

Elkfox - The eCommerce Experts
Monk1
New Member
2 0 0

Hi Cam,

The demo looks amazing but I got stuck in midway while implementing the code. Could you please help with the implementation too?

Cam-
Shopify Expert
178 0 44

Hi Monk. We can't help with code stuff on the forums, but please feel free to reach out to us at https://elkfox.com/contact 🙂

Elkfox - The eCommerce Experts
Joel_Nguyen1
Shopify Partner
35 0 4

Hello,

Where is your app? why I can't find on app store?

Thanks,

Nham

Shopify small task for only $49/task at Globo. Hire us now: http://www.globosoftware.net/product/shopify-theme-tweak-service/
Cam-
Shopify Expert
178 0 44

Hi Joel,

It isn't an app, it is a theme customisation. Please contact us if you would like to know more.

Kindest,
Cam

Elkfox - The eCommerce Experts
Bunny_Mischief
New Member
2 0 0

Hi guys. Any way you could help me install this on my Venture theme in Shopify? www.misschiefbunny.com email mzchiefbunny@gmail.com

David_Kirby
Shopify Partner
1 0 1

This may be helpful for those comfortable editing their themes:

https://gist.github.com/davecap/1187078/ebae13b05f80fabfd03fffa54bf79c264230120f

Per_Arne
Excursionist
16 0 4

@Cam- wrote:

This free theme plugin by our team at Elkfox is awesome https://elkfox.github.io/Ajaxify/

Free, powerful, flexible. What more could you want? ?


Thanks for a nice plugin, Cam. But the big downside is when you click on a product and go back you come to a different place at the collection page. You have to scroll down to find the place you were. That's how our old Magento page worked and our customers got really confused.

 

The paid app INFINITE SCROLL & Load More from Gravity Software doesn't seem to have this problem. Do you have a fix for this? All the demo pages as I can find seem to have the same problem.

Per_Arne
Excursionist
16 0 4

@David_Kirby wrote:

This may be helpful for those comfortable editing their themes:

https://gist.github.com/davecap/1187078/ebae13b05f80fabfd03fffa54bf79c264230120f


Hi David

 

Do you know pages that have installed the plugin you refer to? It would be great to test it before we start to implement it... 👍


digital-vape
Shopify Partner
10 0 3

Has anybody found a homebrew solution to this? I am just looking into implementing infinite scrolling on my store <https://majesticvapor.com/collections/all-coils?page=2> and would like to develop the solution myself (so no apps). It looks like this <https://infinite-scroll.com> javascript library is open source and would do the trick. Has anybody done infinite scrolling without an app that can share any advice? Thanks ~A

Ninthony
Shopify Partner
2272 342 936

Just implemented this on our website the other day:

 

https://elkfox.github.io/Ajaxinate/

 

Very simple, works like a charm. Let me know if you need help, you can send me a direct message.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
digital-vape
Shopify Partner
10 0 3
MightySkins_Blo
New Member
4 0 0

Could one of you clever individuals help me get this implemented on my site?
im using a customized version of doubt. 

Im most unsure of where the lines need to be added in our theme files, any help is greatly appreciated.

https://elkfox.github.io/Ajaxinate/

Ninthony
Shopify Partner
2272 342 936

It's pretty much all outlined for you in the Getting Started section of the website. Duplicate your theme so you can implement it without any hiccups. 

 

-Press the download button to download Ajaxinate.

-Unzip the file and go into the "dist" folder and extract "ajaxinate.min" to your desktop. 

-Go to Online Store > Themes > Actions > Edit Code on your duplicated theme.

- Open your assets folder, add new asset, choose file, and select your ajaxinate.min file you just extracted to the desktop.

- Open theme.liquid in your layouts folder and paste {{ 'ajaxinate.min.js' | asset_url | script_tag }} in the head of your html, underneath the canonical url is fine:

<link rel="canonical" href="{{ canonical_url }}">
{{ 'ajaxinate.min.js' | asset_url | script_tag }}

-Open your sections folder and open collection-template.liquid

-Find your for loop, in Debut's case there are 2 depending on your settings. You need to wrap a div with the id of "AjaxinateLoop" before the forloop begins and after the forloop ends:

      <ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
        <div id="AjaxinateLoop"> // <----- Start Div ------>
        {% for product in collection.products %}
          <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
            {% include 'product-card-grid', max_height: max_height %}
          </li>
        {% else %}
          {% comment %}
          Add default products to help with onboarding for collections/all only.

          The onboarding styles and products are only loaded if the
          store has no products.
          {% endcomment %}
          {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
            <li class="grid__item">
              <div class="grid grid--uniform">
                {% for i in (1..limit) %}
                  <div class="grid__item {{ grid_item_width }}">
                    <div class="grid-view-item">
                      <a href="#" class="grid-view-item__link">
                        <div class="grid-view-item__image">
                          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                        </div>
                        <div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
                        <div class="grid-view-item__meta">
                          <span class="product-price__price">$19.99</span>
                        </div>
                      </a>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </li>
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
        </div> // <------ End Div -------> 
      </ul>

- Do the same for product-card-list:

      <ul class="list-view-items">
        <div id="AjaxinateLoop"> // <----- Start Div ----->
        {% for product in collection.products %}
          <li class="list-view-item">
            {% include 'product-card-list', product: product %}
          </li>
        {% else %}

          {% comment %}
          Add default products to help with onboarding for collections/all only.

          The onboarding styles and products are only loaded if the
          store has no products.
          {% endcomment %}
          {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0%}
            {% for i in (1..4) %}
              <li class="list-view-item">
                <a href="#" class="list-view-item__link">
                  <div class="list-view-item__image-column">
                    <div class="list-view-item__image-wrapper">
                      <div class="list-view-item__image">
                        {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
                        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                      </div>
                    </div>
                  </div>

                  <div class="list-view-item__title-column">
                    <div class="list-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
                  </div>

                  <div class="list-view-item__price-column">
                    <span class="product-price__price">$19.99</span>
                  </div>
                </a>
              </li>
            {% endfor %}
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
        </div> // <----- End Div ------>
      </ul>

Then find your pagination, by default is says this:

 

    {% if paginate.pages > 1 %}
      {% include 'pagination' %}
    {% endif %}

Change that to this:

    <div id="AjaxinatePagination">
      {% if paginate.next %}
        <a href="{{ paginate.next.url }}">Loading More</a>
      {% endif %}
    </div>

-Finally, open your theme.js and add this to the bottom of the file:

 

document.addEventListener("DOMContentLoaded", function() {
  var endlessScroll = new Ajaxinate({
    container: '#AjaxinateLoop',
    pagination: '#AjaxinatePagination'
  });
});

Now checkout your collection pages, scroll to the bottom and they should keep popping up as you get to the bottom.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
MightySkins_Blo
New Member
4 0 0

Thank you very much, 
It seems to be almost working for me now,  but it is not actually triggering the action , So far .

The page navigator has been replaced at the bottom of the page by "Loading More" and if you click that it takes you to the second page instead of loading more items like it should.

Any advice on what iv got wrong?

Thank you again for the help so far, i really appreciate it.

Ninthony
Shopify Partner
2272 342 936

Any chance you can provide me with a url and password if password protected? I can check it out. I can also request access to your themes and help you out if you need it.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
MightySkins_Blo
New Member
4 0 0

Sure, here is a link to the preview of the theme copy iv made the changes to.

https://0k7x1yj2z5wuwmdm-2292088891.shopifypreview.com/collections/samsung-galaxy-note-9

Ninthony
Shopify Partner
2272 342 936

I'll check it out when I get in in the morning, it looks like you havent ran the function yet though. Did you put this at the end of your javascript file?

 

document.addEventListener("DOMContentLoaded", function() {
  var endlessScroll = new Ajaxinate({
    container: '#AjaxinateLoop',
    pagination: '#AjaxinatePagination'
  });
});
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄