How do I add an infinite scroll on collection pages please? Dawn theme 4.0

[catukf100]

Please note. I'm using the Dawn theme 4.0

Does anyone have a code I can use please?

Thank you in advance!

https://jasmineandjadeinteriors.com/

[PageFly-Victor]

Hi @catukf100,

This is Victor from PageFly - Free Landing Page Builder. 

You can follow this guide to achieve the infinite scroll

Step 1:

We're going to use a script called Scrollify which 'Ajaxinates' Shopify.

First, download the script here. Add ajaxinate.min.js to the assets folder of your Shopify theme

Step 2:

Then add this script tag in main-collection-product-grid.liquid near the other asset_url tags:

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

Step 3:

Add this script right before the schema starts in main-collection-product-grid.liquid to create a new ajaxinate instance.

Step: 4

Then in snippets find pagination.liquid and edit line 44

<script>

const endlessCollection = new Ajaxinate({

container: '#product-grid',

pagination: '.infinite_next',

});

</script>

Add

class="infinite_next"

To the <li> under “paginate.next”. It should look like this screenshot:

Step: 5

We now need to add another initialization in facets.js to account for when a user is filtering products and the pagination changes. In facets.js add this script to the static renderProductCount() function on line 85.

We don't need script tags this time because we're placing it in a javascript function.

const endlessCollection = new Ajaxinate({

container: '#product-grid',

pagination: '.infinite_next',

});

Hope this can help you solve the issue.

Best regards,

Victor | PageFly

[haris2001]

@PageFly-Victor    i already added this  in my theme as well but i am it is working on all pages of my website perfectly. but i want this to work on my websites home page as well. guide me how can i add this function in my website's home page as well. i am using shopify theme dawn version 11

[Shopeezoo]

It works for a collection page. But I need it working for the page where there are a list of collections.

I'm using Dawn14.0

[BSS-Commerce]

Hi @catukf100 

You can try following this tutorial for your theme. There are a lot of apps that can help you solve this problem, but many people find this as a solution for them: https://www.huratips.com/tech-tips/how-to-add-infinite-scroll-pagination-to-shopify-collection-pages...

I hope that you will find it useful.

[Awskur]

This solution worked like a charm. Thank you very much!