How To Add Infinite Scroll on Shopify

After following the steps in the tutorial, your Shopify collection page will display all of the products in the collection without the need for pagination. This will give your customers a better experience, as they will be able to see all of the products without having to click through multiple pages.

1- Download Scrollify

Download Scrollify from here

And upload Ajaxinate.min.js to your Asset folder of theme

2- Include Scrollify in main-collection-product-grid.liquid

Then add the following code to main-collection-product-grid.liquid

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

Add the following code before {% schema %} in main-collection-product-grid.liquid

<script>
const endlessCollection = new Ajaxinate({
container: '#product-grid',
pagination: '.infinite_next',
});
</script>

3- Changing code in pagination.liquid file

Search for {%- if paginate.next -%} and add class="infinite_next" in <li>. So the code should look like below:

{%- if paginate.next -%}
          <li class="infinite_next">
            <a
              href="{{ paginate.next.url }}{{ anchor }}"
              class="pagination__item pagination__item--prev pagination__item-arrow link motion-reduce"
              aria-label="{{ 'general.pagination.next' | t }}"
            >
              {%- render 'icon-caret' -%}
            </a>
          </li>
        {%- endif -%}

4- Adding code in facet.js File

Search for static renderProductCount(html) and below that add the following code:

const endlessCollection = new Ajaxinate({
container: '#product-grid',
pagination: '.infinite_next',
});

5- Adding code in component-pagination.css File

.pagination__list{
  display: none;
}
4.5/5 - (26 votes)

About

5 thoughts on “How To Add Infinite Scroll on Shopify”

  1. this is good. thank you. but the same code snippet is being added to facets.js as is to main-collection-product-grid.liquid:

    const endlessCollection = new Ajaxinate({
    container: ‘#product-grid’,
    pagination: ‘.infinite_next’
    });

    that causes an error in the dev console:
    Uncaught SyntaxError: Identifier ‘endlessCollection’ has already been declared (at facets.js?v=*******:124:11)

    also, is there not a way to enable the infinite scroll on click ?

Leave a Comment

Your email address will not be published. Required fields are marked *