I'm trying to display the sizes of the products on the product card so that the customer won't have to click on the product to find out which sizes are in stock. If the size is in stock, the size will have different styling to the sizes without stock.
What I have at the moment:
{% assign sizes = '' %}
{% for variant in product.variants %}
{% assign sizes = sizes | append: variant.options[0] | append: '_' %}
{% endfor %}
{% assign sizesArr = sizes | split: '_' | uniq %}
{% for size in sizesArr %}
<span>{{ size }}</span>
{% endfor %}
This shows all the sizes of the product. The problem is the code doesn't distinguish between the sizes that have stock and those that don't, so I can't change the styling between the two.
Thanks in advance.