Display 'size' variant under product tile on collection page

Store Design
1

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
Screen Shot 2020-04-28 at 4.55.32 pm.png249×249 31.3 KB

1 Like
2

Hello, @ineedanap

Thanks for post.

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

3

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

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

1 Like
4

@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

2 Likes
5

I’m also interested in displaying this same info.

6

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

7

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.

1 Like
8

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

9

DropletsHawaii

10

@bes

i need store url please

11

Www.dropletshawaii.com

12

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):

{{ product.title }}

and before the price:

{% include ‘product-price-listing’, product: product, show_vendor: show_vendor %}

or whereever suits you best.

% if template == “collection” %}

{% 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 %}
{{ value | escape }}
{% endfor %}
{% endif %}
{% endfor %}

{% endif %}

span.size-values { padding: 5px 5px 5px 0; } span.size-values.soldout { opacity: 0.25; }
13

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

14

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.

15

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.