Display 'size' variant under product tile on collection page

[ineedanap]

Hi, I would like for the size variant to be displayed under the product and show when its out of stock like in the image below. I don't mind the way is it displayed as out of stock (crossed out or faded). I am using simple theme but I have a copy of my website in supply theme.

[KetanKumar]

Hello, @ineedanap 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

[ineedanap]

https://petscharming.com.au/collections/puppy-zzang

Many products have multiple variants so if possible I would like to only display the 'size' variant

[KetanKumar]

@ineedanap 

Thanks for URL

yes, is possible to do some code customization. please send me a personal message and we can discuss what you'd like

[dedgerton]

I’m also interested in displaying this same info. 

[suyash1]

@dedgerton - can you please share your website and let me know what information do you want to put below title?

[bes]

Hi, I'm curious, were you able to get it to work?  I'm thinking of doing the same as am using Debut theme in Shopify.  

[KetanKumar]

@bes 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

[bes]

DropletsHawaii

[KetanKumar]

@bes 

i need store url please 

[bes]

Www.dropletshawaii.com

[Alan15]

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>

[Mark118]

Hi Alan, would this code for the Impulse theme? Many thanks. 

[Alan15]

Hi @Mark118 

That should be possible. I've never used the Impulse theme before, I can't say for sure. If you want to send me a private message and give me access to your code, I can let you know.