How to add numbered list to collection items list?

Technical Q&A
, ,
1

Hello,

I’m looking for a way to add rank numbers to my items list like the image sample. Does anyone have any idea how to do this? I’m looking to apply this to specific collections. My theme is cornerstone.

numbered_list.png
numbered_list.png2377×576 154 KB

2

Hi Domain,

To achieve the numbering system for your collection page, you’ll need to change its code. First, look for the file that contains the code for this section. Next look for the code that goes like

{% for product in collection.products %}
some other code
{% endfor %}

This is the code that prints the product card into your page. Then, inside that code, you’ll need to add the code for the numbering system. Kinda looks like:


{{ forloop.index }}

Then with custom CSS (which I can’t write because it will depend on your store’s code) you’ll be able to place the numbering system code at the top right of each card.

Hope this helps! Good luck! :ok_hand:

If you need help with implementing this to your store, I’d be happy to do it for you for $25. Just let me know if you’re interested and if you have any question, feel free to ask :slightly_smiling_face: :+1: