Question 11843 in Shopify Question posted in
The Shopify help center can be found here.

How I can display the number of items on the page I am looking at? (using liquid / ruby on rails / shopify)

Does anyone know how I can display the number of items on the page I am looking at?
I only know how to display the total number of items, using {{ paginate.items }}

My goal is to display the following message…
"Showing 1 to 8 products from 100" and have this update each time you go to the next page…
"Showing 9 to 16 products from 100"…

      <div>
        <p class="text-sm text-gray-700">
          Showing
          <span class="font-medium">{{ what goes here? }}</span>
          to
          <span class="font-medium">{{ what goes here? }}</span>
          products from
          <span class="font-medium">{{ paginate.items }}</span>
        </p>
      </div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you. I have figured something out but it doesn't work for the last page because the page has less than {{ paginate.page_size }}.

    {{ paginate.page_size }} is the max number of products the page can hold, rather than the actual number of products the page is holding. How can I get the latter?

     <p class="text-sm text-gray-700">
  Showing
  {% assign firstNumber = paginate.current_offset | plus: 1 %}
  <span class="font-medium">{{ firstNumber }}</span>
  to
  {% unless current_page == 1 %}
    <span class="font-medium">{{ paginate.current_offset | plus: paginate.page_size }}</span>
    {% else %}
    <span class="font-medium">{{ paginate.page_size }}</span>
  {% endunless %}
  products from
  <span class="font-medium">{{ paginate.items }}</span>
</p>

  2. 0

    Here’s should be the correct version

    <p class="text-sm text-gray-700">
  {% assign from = paginate.current_offset | plus: 1 %}
  {% assign to = paginate.items %}
  {% if paginate.next.is_link %}
        {% assign to = paginate.current_offset | plus: paginate.page_size %}
  {% endif %}
  <span class="font-medium">{{ from }}</span>    to
  <span class="font-medium">{{ to }}</span>      
  products from <span class="font-medium">{{ paginate.items }}</span>
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search