Pagination of Products Doesn't work on Page

Store Design

Topic summary

Product pagination on a custom Page (Shopify) showing wholesaler inventory fails: the pagination navigation displays multiple pages, but clicking keeps showing the same first 25 products.

Cause identified: Shopify pagination only works in templates that support it (e.g., collection templates), not in Page templates. The Page template lacks the pagination data required by the Liquid paginate tag, so the code cannot paginate there.

Suggested workaround: use AJAX (JavaScript) to fetch and render additional pages dynamically on a Page.

Resolution: the author created an alternate collection template and a new collection, and pagination worked as expected.

Status: resolved.

Key terms:

  • Liquid paginate: Shopify template tag that divides items (e.g., collection products) into pages and exposes pagination metadata.
  • Page vs. Collection template: Collection templates support product pagination; Page templates do not.
  • AJAX: technique to load content asynchronously without full page reload.
Summarized with AI on February 23. AI used: gpt-5.
1

I am trying to create a custom page that shows inventory for our wholesalers for all products and is paginated. For whatever reason, the products in the for loop do not paginate. The pagination navigation shows all of the pages for our products but when clicked it still shows the same first 25 products no matter what page it is on.

{%- assign featured_collection = section.settings.collection -%}
{% paginate featured_collection.products by 25 %}
# {{section.settings.heading}}
{{ paginate | default_pagination: next: '>', previous: '<' }}

  {% for product in featured_collection.products %}
    {% assign total_inventory = 0 %}
    {% assign sku_length = product.first_available_variant.sku | size | minus: 1%}
    
  {% endfor %}
  

| Collection | Item Name | Mockup | Design Code / Season | Wholesale Price | Available Sizes | Total Available |
| - | - | - | - | - | - | - |
| {{product.collections[1].title}} | {{product.title}} |  | {{product.first_available_variant.sku | slice: 0,sku_length  }} | {{product.price | times: 0.5 | money }} | <br>        {% for variant in product.variants %}<br>          {{variant.option1}}: {{variant.inventory_quantity}}<br><br>          {% assign total_inventory = total_inventory | plus: variant.inventory_quantity %}<br>        {% endfor %}<br>       | {{total_inventory}} |

{{ paginate | default_pagination: next: '>', previous: '<' }}
{% endpaginate %}
{% style %}
  td img {
    max-height: 300px;
  }
{% endstyle %}

{% schema %}
{
    "name": "Inventory Table",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading"
      },
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      }
    ],
    "presets": [
      {
        "name": "Inventory Table",
        "category": "Store information"
      }
    ]
}
{% endschema %}

www.greatstateclothing.com/pages/inventory

2 Likes
2

Pagination will only work in templates that support it. You can not paginate a collection in a page template. The Page template isn’t given the pagination data so even though your code looks good it just can’t run.

So what you’re seeing is the expected result.

You could look to pull in the additional pages with AJAX calls instead. It means doing more with JavaScript but you’d still get a similar result.

3 Likes
3

@Jason

I just made an alternate collection template and made a new collection for it and that worked! Thank you!

1 Like