> For the complete documentation index, see [llms.txt](https://elkfox.gitbook.io/ajaxinate/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://elkfox.gitbook.io/ajaxinate/master.md).

# Shopify endless scroll plugin

## Features

* No dependencies
* Multiple methods; 'Endless scroll' automatically adds content as you scroll, whereas 'endless click' adds content on click
* Graceful fallback when JavaScript is not available
* Created for Shopify, but will work on any site

## Demos

* [**Endless scroll demo**](https://ajaxinate.myshopify.com/) ↗
* [**Endless click demo**](https://ajaxinate.myshopify.com/collections/all?view=endless-click) ↗

## Getting started

You can either use NPM to add the plugin to your project, or manually add and the configure the code as necessary

{% content-ref url="/pages/-Lzo3bPTbCQ-avPonHd2" %}
[Getting started](/ajaxinate/getting-started.md)
{% endcontent-ref %}

## Settings

If you would like to change the names of the selectors, you can pass them in with the following settings:

| Option      | Default                  | Type     | Description                                                     |
| ----------- | ------------------------ | -------- | --------------------------------------------------------------- |
| container   | **#AjaxinateContainer**  | String   | Selector to identify the container element you want to paginate |
| pagination  | **#AjaxinatePagination** | String   | Selector to identify the pagination element                     |
| method      | **scroll**               | String   | Changes the method to 'endless click when set to' \`click\`     |
| offset      | **0**                    | Integer  | The distance required to scroll before sending a request        |
| loadingText | **Loading**              | String   | The text of the pagination link during a request                |
| callback    | null                     | Function | Function fired after the new page has been loaded               |

For example:

```javascript
document.addEventListener("DOMContentLoaded", function() {
  var endlessScroll = new Ajaxinate({
    container: '#AjaxinateContainer',
    pagination: '#AjaxinatePagination',
    method: 'click',
    offset: 1000
  });
});
```

## Methods

{% content-ref url="/pages/-LzoCDxAIqSn39lWEMdF" %}
[Methods](/ajaxinate/methods.md)
{% endcontent-ref %}