Skip to content

Instantly share code, notes, and snippets.

@davecap
Last active March 19, 2024 13:08
Show Gist options
  • Save davecap/1187078 to your computer and use it in GitHub Desktop.
Save davecap/1187078 to your computer and use it in GitHub Desktop.
"Infinite" scrolling in Shopify collections
{% paginate collection.products by 20 %}
<!-- the top of your collections.liquid -->
<!-- START PRODUCTS -->
{% for product in collection.products %}
<!-- START PRODUCT {{ forloop.index | plus:paginate.current_offset }} -->
<div class="product" id="product-{{ forloop.index | plus:paginate.current_offset }}">
{% include 'product' with product %}
</div>
<!-- END PRODUCT {{ forloop.index | plus:paginate.current_offset }} -->
{% endfor %}
{% if paginate.next %}
<div id="more"><p>&darr; <a href="{{ paginate.next.url }}">More</a></p></div>
{% endif %}
<div id="product-list-foot"></div>
<!-- END PRODUCTS -->
<!-- the bottom of your collections.liquid -->
{% endpaginate %}
{% if template contains 'collection' %}
function ScrollExecute() {
if($(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {
scrollNode = $('#more').last();
scrollURL = $('#more p a').last().attr("href");
if(scrollNode.length > 0 && scrollNode.css('display') != 'none') {
$.ajax({
type: 'GET',
url: scrollURL,
beforeSend: function() {
scrollNode.clone().empty().insertAfter(scrollNode).append('<img src=\"{{ "loading.gif" | asset_url }}\" />');
scrollNode.hide();
},
success: function(data) {
// remove loading feedback
scrollNode.next().remove();
var filteredData = $(data).find(".product");
filteredData.insertBefore( $("#product-list-foot") );
},
dataType: "html"
});
}
}
}
$(document).ready(function () {
$(window).scroll(function(){
$.doTimeout( 'scroll', 200, ScrollExecute);
});
});
{% endif %}
@harisbabic
Copy link

Hey guys, I am using the Shopify Debut theme and I would love to implement this code but not exactly sure where to add this within the files and what to take out from the files-- if anything?

Thanks so much

@Nomled
Copy link

Nomled commented Jul 4, 2018

Hi,
I use the Shopify Brooklyn theme
It currently used ‘pages’ and I want to convert it to ‘infinite scrolling. I want the product to load as you scroll down.
I want to go into the code and make my product page have infinite scrolling. I do not want to change the theme and use an app please help me thAnks

@lowkeyshift
Copy link

I had a pagination problem as well and was short on time. I ended up trying this - https://elkfox.github.io/Ajaxify/#getting-started - Works like a charm. Got the AJAX pagination working less than 5 mins.

Hey kevinhf I tried following the documentation for the Ajaxify, but wasn't able to get it working. Would you be able to give me some pointers on where the code is supposed to be injected? Or what steps you took to integrate that infinity scroll solution?

@luxendary
Copy link

Hi guys,

I'm using narrate theme and getting "Liquid error: Could not find asset snippets/product.liquid" error.
Have Product-card.liquid and product-form.liquid in my nippets.

@luxendary
Copy link

@davecap do you happen to know a quick workaround with newer Shopify themes that use product-card and product-form snippet names?

@davecap
Copy link
Author

davecap commented Oct 28, 2019

Sorry, I haven't worked with Shopify themes in several years...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment