How to display Available Size Variants on collection page?

2 0 0

Hello guys! 

I'm trying to figure out a way to add the available size variants on the collection page, either over the product image or underneath, here are a couple of examples of what I mean:

Screenshot 2023-07-24 at 11.33.22 am.png 

Screenshot 2023-07-24 at 11.33.49 am.png

I've tried adding snippets and codes I've found here in the forum and elsewhere but the solutions are quite limited and when included the size variants are displayed in a wrong alignment or showing all variants including the unavailable ones, here are some examples:


Screenshot 2023-07-24 at 11.53.50 am.png 

Screenshot 2023-07-24 at 11.50.07 am.png

Any light on this issue will be highly appreciated, thank you very much in advance!

Replies 4 (4)

Shopify Partner
285 19 84

Hello @JSVartare ,


You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code

Go to Section -> collection-template.liquid file or something name similar to this

Find the loop that iterates through the products in the collection like this

{% for product in collection.products %}
  <!-- Product HTML markup goes here -->
{% endfor %}

Inside the loop, modify the code like this example

{% for variant in product.variants %}
  {% if variant.available %}
    <p>{{ variant.title }}</p>
  {% endif %}
{% endfor %}

Save and preview


Hope this can help.


Transcy - The #1 Translation and Currency Converter
- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog
2 0 0

Thank you very much! I'll test it out and get back here to let you know if it worked.

1 0 0

Hey Transcy! 


This worked for me,  but it added the variants as a vertical list. Is there a way to make the list horizontal? 




Shopify Partner
248 61 67

For anyone trying to showcase all product variants and their prices in Shopify collections, here's a video that could help.


- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at