Coding for displaying available sizes under the product cards

[jbags]

Hi there!

I would like to show the size variants below the product card when I'm in "collection view".  I've included a screenshot below of what I am looking for.  

I'm on the free Dawn theme.

If someone has the right coding, and wouldn't mind telling me exactly where to go to plug it in, I would be forever grateful!

[KoryP]

That's a little bit involved, but you can add the variants to card-product.liquid after line 207 ... you can see how variant options are handled on product pages (main-product.liquid) in product-variant-picker.liquid, which loops through product.options_with_values and renders product-variant-options.liquid.  The specifics depend on how you implemented sizes for your variants, but that should get you in the right area.  And, of course, there'd be some css work to match your design.

[Shadab_dev]

Okay so open your card-product.liquid file and add all this code

//////////// Code ////////////
{% if card_product.available %}
<div style="text-align:center; position: relative; z-index:10; " class="product-sizes">
<!-- Loop through all product options -->
{% for option in card_product.options_with_values %}
<!-- Check if the option name is 'Size' -->
{% if option.name == 'Size' %}
<!-- Loop through all values of the 'Size' option -->
{% for value in option.values %}
<!-- Find the matching variant for the current option value -->
{% assign variant_id = '' %}
{% for variant in card_product.variants %}
{% if variant.option1 == value or variant.option2 == value or variant.option3 == value %}
{% assign variant_id = variant.id %}
{% endif %}
{% endfor %}

<!-- Display the size option with a data-variant attribute -->
<a
data-variant="{{ variant_id }}"
style="margin:0 20px; cursor:pointer; text-decoration: none !important; color: #000000; border: 2px solid black; padding: 5px 10px; background: whitesmoke;"
href="{{ card_product.url }}?variant={{ variant_id }}"
>
{{ value }}
</a>
{% endfor %}
{% endif %}
{% endfor %}
</div>
{% endif %}
///////// Code End ////////

Place this code here

Just between the two closing div's. You can style it as per your need. Hope this helps.

[jbags]

Thank you SO much!! Ok, so I put it in there, and it added the sizing boxes correctly, but the boxes are super low and laying on top of the product card below them.  Do you know what I would do to move them up right below the product cards? I've included a screenshot of where they are sitting. Other than that, it appears to work GREAT!  I appreciate you SO much! Truly!

[Shadab_dev]

Send me the store link

[jbags]

I took the code off since it wasn't displaying quite right, but this is the link.  I can't add you as a collaborator though, this is my clients site, I'm trying to fix this for her. Thank you so much!!!

[Shadab_dev]

Please duplicate the theme and add the code to it and send me the link for the duplicate theme preview. I will need to see the changes I am making to put in the right place. 

[jbags]

Ok, so I duplicated it and then clicked this preview button, and this is the link!  I hope I did that correctly!  I REALLY appreciate your help!

[Shadab_dev]

You will need to add my code as well in this duplicate theme from the code editor like you did for the live one 

[jbags]

Ah thank you! I got that code added in, and here is the link for the preview with that code added.  Thank you so much!!!

[Shadab_dev]

I dont think you have added the code correctly, i dont see the size boxes i coded. Add the code as mentioned before  in the  duplicate theme as well

[jbags]

Hi there! I'm seeing them on there! Here's a few links to some of the collections where I'm seeing the boxes in there! They're just super low and almost on top of the product card below them!  I can also send you a file of the downloaded code if you'd like. Thank you so much!  Here's the preview link again: here.  
Denim
Dresses
Tops
Bottoms

[Shadab_dev]

Man i am sorry but i don't see the list. I need you to duplicate the theme, edit code on that duplicate one like explained above and share me the preview link for the duplicate one and not the live one.. The link you have inserted, i dont see the sizes on that.

[jbags]

Ok I think I figured out where I went wrong with the link.  Try this one: here.  I also filmed a video showing you where I got the link here, so if it's wrong, just let me know where to find the correct one! Hopefully I got it right this time. Thank you so much!

[Shadab_dev]

Yes you got it right this time, but it will be difficult to share the code cause it will be a lot of adjustments due to screen size differences.

If its okay with you let me know i can help you out over a call.

[jbags]

Ah ok, I can do next week, what are some times that work for you?

[Shadab_dev]

Yeah, let's do mon around 3 to 3:30 pm IST.

[jbags]

Hi there! I'm on EST, would there be any way that you could talk around 9:30 or 10 am IST?  That's 10:30 or 11 pm for me. If so, let me know what day. And also how we would talk. Zoom? 

[Shadab_dev]

9:30 or 10 am IST I can do this time but on weekends. So lets do it this saturday. And Yes we can join on zoom or gmeet. Also try get in touch with whatsapp may be, the links in my signature below. Just makes the conversation convenient