How to display Available Size Variants on collection page?

Store Design

Topic summary

Goal: show only available size variants (e.g., S, M, L) on Shopify collection pages, positioned over/under product images. Screenshots illustrate desired layouts and current issues (misalignment and inclusion of sold‑out sizes), so visuals are central to understanding.

Proposed solution: edit the collection template (e.g., collection-template.liquid). Within the loop over collection.products, iterate product.variants and render variant.title only when variant.available is true. This filters out unavailable sizes.

Status/outcomes: one user confirmed the code works but renders sizes as a vertical list. They asked how to display variants horizontally; no CSS/markup solution was provided in the thread, so layout remains unresolved.

Additional resource: a video link was shared demonstrating how to showcase all product variants and their prices in collections, which may help extend the implementation.

Open items: styling the variant list horizontally and aligning it with product cards; ensuring consistent placement (over or under images). No final resolution yet; discussion remains open.

Summarized with AI on January 7. AI used: gpt-5.
1

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.22 am.png450×697 109 KB

Screenshot 2023-07-24 at 11.33.49 am.png
Screenshot 2023-07-24 at 11.33.49 am.png472×652 79.7 KB

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.53.50 am.png564×316 36.4 KB

Screenshot 2023-07-24 at 11.50.07 am.png
Screenshot 2023-07-24 at 11.50.07 am.png565×218 30.9 KB

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

2

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

1 Like
3

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

4

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

5

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