Shopify themes, liquid, logos, and UX
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 %}
<h1>{{section.settings.heading}}</h1>
{{ paginate | default_pagination: next: '>', previous: '<' }}
<table>
<tr>
<th>Collection</th>
<th>Item Name</th>
<th>Mockup</th>
<th>Design Code / Season</th>
<th>Wholesale Price</th>
<th>Available Sizes</th>
<th>Total Available</th>
</tr>
{% for product in featured_collection.products %}
{% assign total_inventory = 0 %}
{% assign sku_length = product.first_available_variant.sku | size | minus: 1%}
<tr>
<td>{{product.collections[1].title}}</td>
<td>{{product.title}}</td>
<td><img src="{{product.featured_image | image_url }}" alt=""></td>
<td>{{product.first_available_variant.sku | slice: 0,sku_length }}</td>
<td>{{product.price | times: 0.5 | money }}</td>
<td>
{% for variant in product.variants %}
{{variant.option1}}: {{variant.inventory_quantity}}<br>
{% assign total_inventory = total_inventory | plus: variant.inventory_quantity %}
{% endfor %}
</td>
<td>{{total_inventory}}</td>
</tr>
{% endfor %}
</table>
{{ 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
Solved! Go to the solution
This is an accepted solution.
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.
This is an accepted solution.
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.
I just made an alternate collection template and made a new collection for it and that worked! Thank you!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025