display available size collection list and product grid Dawn

[rogerjet]

Hi,

I would like to show the size variants below the product image on the collection view and product grid.

I have seen a few stores have it but not sure how it is done.

view my store swaace.com.au

something like the example below.

[Liquid_xPert_SJ]

Hi @rogerjet

Are you only want to show these sizes names on the collection view or you want the functionality which works when you click on it? because most of the stores by clicking add that variant to the cart and some stores takes you to the product page.

[rogerjet]

I would like it to go the product page, but if not possible without an app, I would live with only showing the names.

[Liquid_xPert_SJ]

@rogerjet 

you can add the below code into your theme files, card-product.liquid which is located in the snippet folder right after the price.

Online Store > Click on the 3 dots beside the Customize button > Edit Code > Snippet > card-product.

Thanks

[rogerjet]

Hey @Liquid_xPert_SJ you forgot to insert the code

[Multi11]

This worked for me in card-product.liquid:

{% for variant in card_product.variants %}
{%- assign first_option = variant.options.first -%}

{% if first_option != "" %}
{% if variant.available %}
{%- assign available_variants = available_variants | append: '<span class="option">' | append: first_option | append: '</span>' -%}
{% else %}
{%- assign unavailable_variants = unavailable_variants | append: '<span class="option unavailable">' | append: first_option | append: '</span>' -%}
{% endif %}
{% endif %}
{% endfor %}

{{ available_variants }}
{{ unavailable_variants }}
</div>