This should work for the debut theme; make sure your option is named "size", if it's got a different name change it on line 5 of my code below.
You need to update the product-card-grid.liquid file in the snippets folder.
Place the code below after the product title ( around line 45):
<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
and before the price:
{% include 'product-price-listing', product: product, show_vendor: show_vendor %}
or whereever suits you best.
% if template == "collection" %}
<span style="display:block; margin-top:4px;">
{% for option in product.options_with_values %}
{% assign option_in_lowercase = option.name | downcase %}
{% if option_in_lowercase contains 'size' %}
{% for value in option.values %}
{% assign variant_avialable = true %}
{% if product.variants[forloop.index0].available == false %}
{% assign variant_avialable = false %}
{% endif %}
<span class="size-values {% unless variant_avialable %}soldout{% endunless %} text-center">{{ value | escape }}</span>
{% endfor %}
{% endif %}
{% endfor %}
</span>
{% endif %}
<style>
span.size-values {
padding: 5px 5px 5px 0;
}
span.size-values.soldout {
opacity: 0.25;
}
</style>
Need more help? Contact me
here
