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

catukf100
Excursionist
18 2 1

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/

Replies 4 (4)

PageFly-Victor
Shopify Partner
7865 1785 3045

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:

PageFlyVictor_0-1669782595001.png

 

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

banned
haris2001
New Member
6 0 0

@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

BSS-Commerce
Shopify Expert
3380 447 497

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.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Awskur
Shopify Partner
5 1 3

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

Oscar Reyes