display available size collection list

Store Design
, ,
17

here is the updated codes

{% assign sizes = "" %}
       {% for option in card_product.options_with_values  %}
      {% if option.name contains 'ize' %}
       {%- for value in option.values -%}
             {% assign sizes = sizes | append:','| append:value | append:',' %}
    {% endfor %}
             {% endif %}            
    {% endfor %}    
      
        {% for variant in card_product.variants %}
          {% assign ntitle = variant.title | split:'/ ' | first | strip %}
          {% assign ntitle = ',' | append:ntitle | append:',' %}
            {% if sizes contains ntitle %}
              {{ ntitle | remove:','}}
              {% assign sizes = sizes | remove:ntitle %}
             {% endif %} 
            {% endfor %}

and updated css

.ancvariants a {
    color: #000;
    border: 1px solid grey;
    padding: 10px;
    text-decoration: none!important;
    width: 35px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 2px;
font-size: calc(var(--font-heading-scale) * 1.3rem);
}
.ancvariants a:hover {
    background: #000;
    color: #fff;
}
.ancvariants a.outstock {
    border-color: rgba(var(--color-foreground), .1);
    color: rgba(var(--color-foreground), .6);
    text-decoration: line-through !important;
}