Display available sizes on collection page

Store Design
, ,

Topic summary

A user asks how to display available product sizes on a collection page and strike through unavailable sizes. They mention using the “good taste” theme and being comfortable with HTML/CSS but finding Liquid challenging.

Proposed Solution:

  • A respondent confirms this requires custom code tailored to the specific theme
  • Provides a code snippet concept using Liquid templating:
    • Check if product has size options
    • Loop through product variants
    • Display variant options conditionally based on availability

Status: The discussion provides a starting framework but requires theme-specific implementation. The solution involves iterating through product variants and conditionally rendering size information based on stock availability.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Wondering if it’s possible to display the available sizes on the collection page & strike the sizes that are not available. I know my way around html/css but liquid is a problem for me.

I’m using the taste good theme.

Thank you.

variants.png
variants.png403×376 72.9 KB

2

Hi

For that need custom code based on theme’s existing code

but i can give idea for that, add below code in your product grid code

{% if product.options.size %}
      
        Available sizes: 
        {% for variant in product.variants %}
          {% if variant.available %}
            {{ variant.option1 }},
          {% endif %}
        {% endfor %}
      

    {% endif %}