Getting started

Search…
Links
Getting started
NPM
1
$ npm i ajaxinate
Copied!
1
import {Ajaxinate} from 'ajaxinate';
2
​
3
new Ajaxinate({
4
  container: '#AjaxinateContainer',
5
  pagination: '#AjaxinatePagination',
6
  loadingText: 'Loading more...',
7
});
Copied!
Manual installation
IMPORTANT! If you are using Ajaxinate without a package manager, use the v2 branch ↗
1.Add ajaxinate.min.js to the assets folder of your shopify theme, or add it to your vendor files if you are using Slate or a similar method.
2.Add the ajaxinate.min.js script src tag before the closing body tag, or defer its loading:
collection.liquid
1
{{ 'ajaxinate.min.js' | asset_url | script_tag }}
Copied!
3.Setup your collection or blog template, for example:
collection.liquid
1
{% paginate collection.products by 3 %}
2
    <div id="AjaxinateContainer" >
3
      {% for product in collection.products %}
4
        {% include 'product-grid-item' %}
5
      {% endfor %}
6
    </div>
7
​
8
    <div id="AjaxinatePagination">
9
      {% if paginate.next %}
10
        <a href="{{ paginate.next.url }}">Loading More</a>
11
      {% endif %}
12
    </div>
13
{% endpaginate %}
Copied!
4.Initialize it in your script file, or inline:
1
document.addEventListener("DOMContentLoaded", function() {
2
  var endlessScroll = new Ajaxinate();
3
});
Copied!
5.Configure your settings as desired.
Shopify endless scroll plugin
Methods
Last modified 1yr ago
Copy link
Contents
NPM
Manual installation