How to display Available Size Variants on collection page?

[JSVartare]

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:

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:

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

[Transcy]

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 %}
  
{% endfor %}

Inside the loop, modify the code like this example

{% for variant in product.variants %}
  {% if variant.available %}
    

{{ variant.title }}

  {% endif %}
{% endfor %}

Save and preview

Hope this can help.

Transcy

[JSVartare]

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

[penelopeew]

Hey Transcy!

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

Kindest,

Penny

[KabirDev]

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

Display Variants Name and Price on Collection Pages in Shopify