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
