Infinite scrolling for Motion 9.0

Shopify Discussion
1

Hello,

Can anyone help me to add infinite scrolling on collection page for Motion 9.0 theme?

Thanks in advance.

2

Hello @Ckuriosity ,

To add infinite scrolling on a collection page for the Motion 9.0 theme, you can follow these steps:

Go to Online Store → Themes → Customize → Collection page

Look for Pagination Type → Select Infinite Scroll

Save and Preview

Hope this can help.

OneCommerce team.

3

Ckuriosity_0-1682483652648.png
Ckuriosity_0-1682483652648.png1366×768 270 KB

No option found for pagination type, Thank for reply.

4

Hello @Ckuriosity ,

Sorry for the confusion, in this case, you may need to edit the code to troubleshoot this problem. You can try to follow these steps:

  • Go to Online Store → themes → actions → edit code
  • Go to Sections folder → collection-template.liquid file → Find the following code
{% paginate collection.products by settings.products_per_page %}
  • Replace the above code with the following code:
{% paginate collection.products by 999 %}
  • Save the changes to the file.
  • Next, find and open the “collection-template.js” file in the “Assets” folder.
  • Add the following code to the end of the file:
$(document).ready(function() {
    var infiniteScrolling = true;
    var loadMoreButton = $('.load-more');
    if (loadMoreButton.length) {
        var collectionUrl = window.location.pathname;
        $(window).scroll(function() {
            if (infiniteScrolling && $(window).scrollTop() > $(document).height() - $(window).height() - 400) {
                infiniteScrolling = false;
                loadMoreButton.html('Loading...');
                $.ajax({
                    url: collectionUrl + '?page=' + loadMoreButton.data('page'),
                    success: function(data) {
                        var products = $(data).find('.product-item');
                        $('.product-grid').append(products);
                        loadMoreButton.data('page', parseInt(loadMoreButton.data('page')) + 1);
                        infiniteScrolling = true;
                        loadMoreButton.html('Load more');
                        if (products.length < 16) {
                            loadMoreButton.hide();
                        }
                    },
                    dataType: 'html'
                });
            }
        });
        loadMoreButton.on('click', function(e) {
            e.preventDefault();
            infiniteScrolling = false;
            loadMoreButton.html('Loading...');
            $.ajax({
                url: collectionUrl + '?page=' + loadMoreButton.data('page'),
                success: function(data) {
                    var products = $(data).find('.product-item');
                    $('.product-grid').append(products);
                    loadMoreButton.data('page', parseInt(loadMoreButton.data('page')) + 1);
                    infiniteScrolling = true;
                    loadMoreButton.html('Load more');
                    if (products.length < 16) {
                        loadMoreButton.hide();
                    }
                },
                dataType: 'html'
            });
        });
    }
});
  • Save and test

Hope this can work.

OneCommerce team.

5

Hi @Ckuriosity ,

Thanks for reaching out! That is a great question.

Considering this feature is not built in to your theme Themes Editor it will require some code editing. Motion is a third party theme by Archetype Themes, and while I wasn’t able to find their official tutorial on this customization you might be interested in a guide outlined on a similar thread. The reply was marked as a solution by the original posted, so hopefully it’s helpful.

Keep in mind before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes and start again if you need to.

However, if you don’t feel comfortable editing the template code yourself, you can always reach out theme developer to ask if they support this customization. Their support page is linked here. Also, you can post a job on the Shopify Experts Page and see what feedback and quotes you get or try an app such as Scroll Freely.

How are things going with the rest of your website? If you’re looking for the next steps to grow your business further, you might be interested in our video courses on Shopify Learn! This is a free resource for you to learn about anything from marketing to store design. I highly recommend taking advantage of this as you’ll find many tips and strategies from experts in different fields.

As always, should any questions arise, be sure to reach out to us!

6

i tried this but not working ,
“collection-template.js” file is not in the “Assets” folder.

i added in main collection file under script tag but it not working, even tried to add in theme.js but not helped.