How to determine the product count displayed on each Shopify collection page?

Other Questions Shopify
1

I’m trying to create a feature for my Shopify store that shows customers how many products they’re seeing on the current collection page compared to the total number of products in that collection. I’ve managed to get the total product count for the collection, but I’m stuck on how to find out how many items are actually displayed on the current page.

Here’s what I’ve got so far in my Liquid code:

<div class="item-counter">
  {{ items_on_page }} of {{ collection.all_products_count }} items
</div>

The collection.all_products_count part works fine, but I can’t figure out what to use for items_on_page. Is there a Shopify variable or method that gives me this information? Or do I need to calculate it somehow based on the pagination settings?

Any help would be really appreciated. I’m new to Shopify development and I’m not sure if I’m missing something obvious here. Thanks!

2

As a Shopify developer, I’ve tackled this issue before. There’s no built-in Liquid variable for items on the current page, but you can calculate it yourself. Here’s how I’ve done it:

Use paginate tag to control your collection’s pagination. Inside the paginate block, you can access paginate.current_page and paginate.page_size. Multiply these to get the max number of items on the page, then use | minus: collection.products.size | abs to adjust for the last page which might not be full.

Your code could look like this:

{% paginate collection.products by 24 %}
  {% assign items_on_page = paginate.current_page | times: paginate.page_size | minus: collection.products.size | abs %}
  <div class=\"item-counter\">
    {{ items_on_page }} of {{ collection.all_products_count }} items
  </div>
  <!-- Your collection layout here -->
{% endpaginate %}

This approach has worked well for me across various Shopify themes. Just remember to adjust the 24 to match your actual products-per-page setting.

3

hey, i’ve dealt with this before. you can use the ‘forloop’ object in liquid to count products. wrap your product loop in a ‘capture’ tag like this:

{% capture item_count %}{% for product in collection.products %}{% if forloop.last == true %}{{ forloop.index }}{% endif %}{% endfor %}{% endcapture %}

then use {{ item_count }} in your counter div. hope this helps!