Display available sizes beneath product on collection page (Shopify). Relies on Dylan Hunt's tutorial on displaying colour variants as separate products (https://dylanjh.com/blogs/15-show-all-colors-of-a-product-as-separate-products-on-the-collection-page)

available-sizes.liquid

{% comment %}Print 'colour' variable to show variant loop is working{% endcomment %}
<p><strong>{{ colour }}</strong></p>
  
{% for product_option in product.options_with_values %}
	
  {% if product_option.name == 'Colour' %}
      {% if product_option.values contains colour %}
        {% assign proceed = true %}
          {% comment %}Print confirmation that test has passed{% endcomment %}
          <p>Yep</p>
      {% else %}
        {% assign proceed = false %}
          {% comment %}Print confirmation that test has failed{% endcomment %}
          <p>Nope</p>
      {% endif %}
  {% endif %}
  
  {% if product_option.name == 'Size' %}
   {% for var in product.variants %}
      {% comment %}Check availability of variant{% endcomment %}
      {% if var.available %} 
    		{% assign spanclass='size-label'%}
      {% else %} 
            {% assign spanclass='size-label size-sold'%}
      {% endif %}

      {% if product_option.values contains var.option1 %}
            <span class="{{spanclass}}">{{var.option1}}</span>
      {% elsif product_option.values contains var.option2 %}
    		<span class="{{spanclass}}">{{var.option2}}</span>
      {% elsif product_option.values contains var.option3 %}
    		<span class="{{spanclass}}">{{var.option3}}</span>
      {% endif %}

    {% endfor %}
    
    {% comment %}{% break %}{% endcomment %}

  {% endif %}

{% endfor %}


  <style>
    .size-label {
    font-size: 12px;
    padding: 3px 5px;
    margin: 2px;
    border-radius: 3px;
    border: 1px solid #222;  
    background-color: #111;
    white-space: nowrap;
    text-align:center;
}
.size-sold {
    color:gray;
    text-decoration:line-through;
    border: 1px solid #111;  
    background-color: #000;
}
  </style>