Quiero implementar el desplazamiento infinito en mi página de colecciones de productos y, a tal efecto, he codificado lo siguiente en mi archivo collection-template.liquid:

 <div id="js-ajax-loop" class="ProductList ProductList--grid Grid" data-mobile-count="{{ mobile_items_per_row }}" data-desktop-count="{{ desktop_items_per_row }}"> {% for product in collection.products %} {% if product.available %} <div class="Grid__Cell 1/{{ mobile_items_per_row }}--phone 1/{{ tablet_items_per_row }}--tablet-and-up 1/{{ desktop_items_per_row }}--{% if section.settings.filter_position == 'drawer' %}lap-and-up{% else %}desk{% endif %}"> {%- render 'product-item', product: product, show_product_info: true, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%} </div> {% endif %} {% endfor %} </div> <div id="js-ajax-pagination"> {% if paginate.next %} <a href="{{ paginate.next.url }}">Loading More</a> {% endif %} </div>

También he agregado lo siguiente en mi archivo custom.js:

 document.addEventListener("DOMContentLoaded", function() { var endlessScroll = new Ajaxinate({ container: '#js-ajax-loop', pagination: '#js-ajax-pagination' }); });

Esto parece funcionar. Sin embargo, llegué al límite de solo poder desplazarme hasta 48 productos.

Veo en mi esquema que tengo la configuración de Producto por página :

 "type": "range", "id": "grid_items_per_page", "label": "Products per page", "min": 4, "max": 100, "step": 4, "default": 16

Que aumenté de 48 a 100. También modifiqué esta configuración en Shopify:

Pero todavía solo aparecen 48 productos (de un total de 80 activos).

¿Alguien sabría qué podría hacer para arreglar esto y hacer que muestre todos los productos?

(PD: estoy trabajando en un tema no activo para esta solución. ¿Se solucionaría ajustando el recuento en el tema activo?)