Infinite Scroll for Shopify Collections
Pagination is annoying, especially for small online stores. I’d much rather see all the products on one page than have to click through each page at a time… wayyy to much work for me. This is a short post about how I implemented a simple “infinite” scroll on a Shopify theme that we (Late Show Labs) made for Rooney. See it in action at http://www.rooneyshop.com/collections/all .
Shopify allows for standard pagination of collections (see the Pagination page in the Shopify wiki http://wiki.shopify.com/Pagination and the Shopify Theme Guide http://wiki.shopify.com/The_Shopify_Theme_Guide). There’s a max number of products that can be shown on a single page. I think it is 50 items, but I can’t remember right now so don’t quote me on that :)
Basically, you need to trick Shopify into thinking that you want it to paginate. From there you just have to loop through products the same way you always have but with a few extra divs. Add the following to your collections.liquid file:
I’m using a product “snippet” (located in snippets/product.liquid) in this example.
The key here is that each product div id is unique and that you have a div#more followed by a div#product-list-foot at the end. Note that the div wrapper around the product should have class “product”!. All of these things tell the js code when to load and where to stick the next set of products. Also be sure to add the link to paginate.next.url (the link to the next page of products) inside the div.
Now you will make use of jQuery. What the code is doing is essentially executing a function (ScrollExecute) every time the user scrolls on the page. If the user gets within 800 px of the bottom, the next “page” of products is loaded via AJAX GET.
You will need to get jQuery and the doTimeout plugin (http://benalman.com/projects/jquery-dotimeout-plugin/) to make this work.
You can also get an animated loading gif (called “loading.gif”) in this example. What the js code does is get the next “page” of products, filter out only the
Add the following code to your layout/theme.liquid file, probably at the bottom before the </body> tag.
Now just upload your theme and enjoy infinite scroll!
