Adding infinite scrolling to Shopify - Collection Pages - Dawn Theme

Following the instruction:

• https://undefined.agency/#/blog/how-to-add-infinite-scrolling-to-dawn 
• https://minionmade.github.io/scrollify/ 
  

- You should duplication theme before applying changes.

- Online Shop - Theme - Edit Code

- You could use search function to look for specific files:

Step 1: Download Source File

https://minionmade.github.io/scrollify/download.zip 

 

Step 2:  (Line 5)

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

main-collection-product-grid.liquid

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

 Step 3: (Near Line 195)

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

 main-collection-product-grid.liquid 

<script>
const endlessCollection = new Ajaxinate({
container: '#product-grid',
pagination: '.infinite_next',
});
</script>

 Step 4 : (Near Line 62)

Add class = "infinite_next" inside <li> tag 

pagination.liquid 

Step: 5 (Near Line 1)

face.ts

const endlessCollection = new Ajaxinate({
container: '#product-grid',
pagination: '.infinite_next',
});

Bonus Step:  To make "loading" to "..."

ajaxinate.min.js