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 %}
  <!-- 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

[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.