Infinite Scroll or Endless Scroll in Dawn 2.0 on Collection Pages

RicquelS
Excursionist
16 0 7

Is there an easy way to add infinite scroll in Dawn 2.0 to the collection pages without adding another app?  I would like the user to be able to scroll through all of the products in a collection without needing to go to the next page.

 

Thanks! 

 

Ricquel

Replies 14 (14)

KetanKumar
Shopify Partner
36831 3635 11964

@RicquelS 

yes, please try this code

https://gist.github.com/davecap/1187078/ebae13b05f80fabfd03fffa54bf79c264230120f

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
josma
Excursionist
11 0 7

Hi, where exactly should I copy this code? Are there any screenshots? I could not find them on github.

 

It would be nice if I could make this work.

undefinedagency
Visitor
1 0 2

Hi I just wrote a quick tutorial on how to add Infinite Scrolling to Dawn for collection pages:

 

You can read it here! 

https://undefined.agency/#/blog/how-to-add-infinite-scrolling-to-dawn

 

Like this comment if it helped you!

josma
Excursionist
11 0 7

Thx, but I made it work with an App. 

 

Do you know how a strike through or at least grey out on Options of a product can be enabled? 

There is nothing built in in Dawn, and no Apps for that.

Art_JulieMiller
Shopify Partner
29 0 11

Thank you so much, this worked perfectly for me.

Art_JulieMiller
Shopify Partner
29 0 11

Hi there, please could you let me know where I'm going wrong with my Scrollify:

The "Loading more" message shows even when there are no more products.

"Loading more" only disappears and highlights the last page number after you click on "Loading more".

As more pages are loaded, the numbers aren't highlighted. Page 1 is permanently underlined until you click on the "Loading more" message on the last page.

 

You could check it out on my website at the following address:

https://juliemiller.art/collections/trevor-coleman

My Shopify store name is julie-miller-e-commerce.

1. Scrollify Loading doesn't disappear.jpg

2. Scrollify Loading only disappears after clicking on it.png

KetanKumar
Shopify Partner
36831 3635 11964

@Art_JulieMiller 

yes can you try 

https://www.huratips.com/tech-tips/how-to-add-infinite-scroll-pagination-to-shopify-collection-pages...

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Art_JulieMiller
Shopify Partner
29 0 11

Thanks very much for your response Ketan. I'm new to Shopify and having trouble with the code. Could you give me guidance?
Here are screenshots of the main-collection-product-grid.liquid file

1) prior to inserting the <div> tags

2) after inserting it where I thought it should go (but clearly I'm wrong)

3) the result

Original.png

With Huratips.png

Result.png

Art_JulieMiller
Shopify Partner
29 0 11

PS: here is a preview link if it helps:
https://jmz5p2gx17pxl4wv-63896027390.shopifypreview.com

Art_JulieMiller
Shopify Partner
29 0 11

PPS: the password for the store is password

KetanKumar
Shopify Partner
36831 3635 11964

@Art_JulieMiller 

oh sorry its not work

KetanKumar_0-1654229021376.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Art_JulieMiller
Shopify Partner
29 0 11

Hi there, the password for the store is password

PerArne
Excursionist
31 0 21

Hi Undefinedagency

 

Does your guide have Snapback Cache that works for Safari and Chrome? I mean if a customer click on a product in the collection and then go back, will he/she come back to the same place at the collection. Or do they have to scroll down again to find the same product?

 

The script we are currently using has problems with the including the metafields filters when more pages are loaded. Is this also a problem with your script?

 

Thanks alot... 🙏 

Smeelah
Navigator
332 1 91

Hi @undefinedagency 

Thanks for the tutorial! I'm very happy to be using it.

 

I'm just wondering if there is a way to show that the end of the scroll has been reached? It still shows 'loading' at the end, with Page 1 underlined.

 

Thanks!