available-sizes.liquid

{% for opt in product.options_with_values %}
  {% if opt.name == 'Size' %}
    {% for var in product.variants %}
      {% if var.available %} 
      {% assign spanclass='size-label'%}
      {% else %} 
      {% assign spanclass='size-label size-sold'%}
      {% endif %}

      {% if opt.values contains var.option1 %}
      {{var.option1}}
      {% elsif opt.values contains var.option2 %}
      {{var.option2}}
      {% elsif opt.values contains var.option3 %}
      {{var.option3}}
      {% endif %}
    {% endfor %}

  {% break %}
  
  {% endif %}
{% endfor %}


<style>
.size-label {
padding: 3px;
margin: 2px;
border-radius: 3px;
white-space: nowrap;
}
.size-sold {
color:gray;
text-decoration:line-through;
}
</style>