Paginated products object changing length every second refresh

Retired Boards Appdev Partners Discussion
1

I have a custom theme where I have pagination on the product page. On every second page refresh (or there abouts), it’s loading all the products on the first page. The pagination pages are also still at the bottom of the list.

If I render {{ collection.products.length }} on the page within the pagination tags, it changes between the products_per_page variable and the number of products in the store.

I have good experience with developing Shopify themes but I haven’t seen this happen before and I’m struggling to even know where to start debugging it as there’s not much to pagination on our end.

This is the code which is nothing too special:

{%- if collection -%}
  <div class="product-grid-container" id="ProductGridContainer">
    {%- paginate collection.products by section.settings.products_per_page -%}
      <div class="collection flex-grow page-width">
        <div class="loading-overlay"></div>
        
        <ul class="grid grid--3-col grid--tablet-2-col list" id="product-grid" data-id="{{ section.id }}">
          {%- for product in collection.products -%}
            <li class="grid__item">
              {%- render 'card-product',
                product: product,
                columns_desktop: 3,
                columns_tablet: 2,
                columns_mobile: 1
              -%}
            </li>
          {%- endfor -%}
        </ul>
      </div>

      {% render 'pagination', paginate: paginate, anchor: '' %}
    {%- endpaginate -%}
    </div>
{%- endif -%}