Hello. I was wondering if someone knows how to make an infinite, looping collection carousel for desktop and mobile. I’m not a coder and I searched the whole internet for a code, but I didn’t found one yet.
Topic summary
Request: An infinite, looping collection carousel on Shopify’s Dawn theme for desktop and mobile, from a non-coder seeking a ready solution.
Update: A helper shared a tutorial link for “infinite scroll pagination” on collection pages, which may differ from a carousel. The requester asked for clarification on two steps:
- Find the Liquid loop
{% for product in collection.products %}and add a wrapper DIV plus another DIV below it. - Add the JavaScript code at the end of the file.
Technical notes:
- Liquid is Shopify’s templating language;
collection.productsiterates products in a collection. - The suggested edit location is
main-collection-product-grid.liquid, where the product loop lives.
Guidance provided: Edit main-collection-product-grid.liquid and insert code at the spot shown in the provided screenshot (image central to understanding where to place changes).
Status: Unresolved. The requester still needs step-by-step implementation details or exact code snippets. Key open question: whether the shared “infinite scroll” approach achieves a true carousel that loops continuously, or if a different solution is required.
Hi @AndreiGhetu ,
Please refer to the following link, it will help you to add this. Refer link
Hope it helps!
Thank you for the link but I have trouble following it. Can you explain for me this part please?
Point 6: " In the online code editor of collection page find to the loop {% for product in collection.products %} and add more a DIV tag to wrapper and add more a DIV tag just below it.
Point 7: Add the javascript code to the end of the file.
Thank you!
Hi @AndreiGhetu ,
Please go to main-collection-product-grid.liquid file and add code here:
Hope it helps!