Shopify how to load more products on collection pages
Coding with Jan - Shopify Developer
0:00 / 0:00
Shopify how to load more products on collection pages
32 007 просмотров · 6 л. назад
Coding with Jan - Shopify Developer
62,7 тыс. подписчиков
32 007 просмотров · 6 л. назад
👨🎓 Automate More. Build Faster. Land Better Opportunities with AI:
https://codingwithjan.com/ai-develope...
🎬 About this Video
A lot of you asked for this: replacing Shopify's default pagination on collection pages with a "load more" button (infinite-scroll style), without paying for a premium theme or app. In this video I build it from scratch. I start in the browser console to show how you can fetch the next collection page's HTML in the background, then pull out just the product grid from that response and append it to the current page. I use the collection's built-in pagination to get the next page URL dynamically (with the paginate object in Liquid), wire it all into the collection template, move the script into a proper assets file and include it in the theme layout, then add the Load More button and a CSS loading spinner to finish it off. Great practice if you want to get comfortable breaking a feature down and building it piece by piece.
🔎 SEO Description
How to load more products on Shopify collection pages without an app or premium theme. This tutorial builds a custom "Load More" button (infinite-scroll alternative to Shopify's default pagination) from scratch using JavaScript fetch: requesting the next collection page in the background, extracting the product grid from the returned HTML, and appending it to the current page. It covers using Liquid's paginate object to get the next page URL dynamically, wiring the script into the collection template and theme layout via the assets folder, and adding a styled Load More button with an animated CSS loading spinner. For Shopify theme developers customizing collection pages.
🤝 Connect on LinkedIn:
/ jan-frey
📧 Contact:
https://codingwithjan.com