• No dependencies
  • Endless scrolling - scroll to the bottom of the content to load next.
  • Endless click - Like endless scroll but click a link to load the next pages.
  • Falls back gracefully when JavaScript is not available.
  • We mostly use it on Shopify but it can work on any site.

Getting Started

Add ajaxinate.min.js to the assets folder of your shopify theme, or add it to your vendor files if you are using slate.

Add ajaxinate.min.js before the closing body tag or defer it’s loading.

{{ 'ajaxinate.min.js' | asset_url | script_tag }}

Setup your collection or blog template, for example:

{% paginate collection.products by 3 %}
    <div id="AjaxinateLoop" >
      {% for product in collection.products %}
        {% include 'product-grid-item' %}
      {% endfor %}

    <div id="AjaxinatePagination">
      {% if paginate.next %}
        <a href="{{ paginate.next.url }}">Loading More</a>
      {% endif %}
{% endpaginate %}

Initialize it in your script file or inline

document.addEventListener("DOMContentLoaded", function() {
  var endlessScroll = new Ajaxinate();


If you wish to change the names of the selectors you can pass them in with the following settings.

For example:

document.addEventListener("DOMContentLoaded", function() {
  var endlessScroll = new Ajaxinate({
    container: '#AjaxinateLoop',
    pagination: '#AjaxinatePagination'
Option Default Type Description
pagination #AjaxinatePagination String A selector to identify the pagination container.
container #AjaxinateLoop String A selector to identify the grid that you want to duplicate.
method scroll String Can be changed to click to that users must click to load more.
offset 0 Integer Decrease the distance required to scroll before sending a request.
loadingText Loading String Change the text of the pagination link during a request.
callback null Function A function fired after the new page has been loaded.



Description: Stop Ajaxinate from running and unbind the event listeners

  // Create a new ajaxinate instance
  const endlessCollection = new Ajaxinate();
  // Destroy the instance