Display 'size' variant under product tile on collection page

ineedanap
Visitor
3 0 2

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.Screen Shot 2020-04-28 at 4.55.32 pm.png

Replies 13 (13)
KetanKumar
Shopify Partner
36719 3634 11912

Hello, @ineedanap 

Thanks for post.

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ineedanap
Visitor
3 0 2

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
Shopify Partner
36719 3634 11912

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dedgerton
Visitor
1 0 0

I’m also interested in displaying this same info. 

suyash1
Shopify Partner
8656 1062 1406

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

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
bes
Tourist
4 0 2

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
Shopify Partner
36719 3634 11912

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
bes
Tourist
4 0 2
DropletsHawaii
KetanKumar
Shopify Partner
36719 3634 11912

@bes 

i need store url please 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
bes
Tourist
4 0 2
Alan15
Shopify Partner
140 27 59
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
Mark118
Excursionist
55 0 4

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

Alan15
Shopify Partner
140 27 59

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.

Need more help? Contact me here