We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Re: Display 'size' variant under product tile on collection page

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 14 (14)

KetanKumar
Shopify Partner
37635 3670 12168

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. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
37635 3670 12168

@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. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
3 0 0

I’m also interested in displaying this same info. 

suyash1
Shopify Partner
11112 1367 1751

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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com
bes
Tourist
5 0 3

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
37635 3670 12168

@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. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
5 0 3
DropletsHawaii
KetanKumar
Shopify Partner
37635 3670 12168

@bes 

i need store url please 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
5 0 3
Alan15
Shopify Partner
149 27 75
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
149 27 75

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
Cory_EPS
Visitor
1 0 0

Hello Alan.  Were you able to figure this out on the Impulse theme?  I also use the Impulse theme and am trying to configure the same setting.

 

Thank you in advance for your reply!  I know it's been a while since the previous post.