A user working on a Shopify store using the free Dawn theme wants to display size variants below product cards on collection pages. They provided a screenshot showing the desired layout.
Initial Solutions Provided:
card-product.liquid after line 207, referencing how variants are handled in product pages through product-variant-picker.liquid and product-variant-options.liquid.card-product.liquid that loops through product options, identifies ‘Size’ variants, and displays them as clickable links.Implementation Issue:
The user successfully added the code and the size boxes appeared, but they’re positioned too low—overlapping the product cards below them instead of sitting directly under their respective cards.
Current Status:
After multiple attempts to share the correct preview link for the duplicate theme (initially sharing live site links instead), the user finally provided the proper preview URL. The developer confirmed seeing the misaligned size boxes and indicated the fix requires multiple CSS adjustments for different screen sizes. They’ve scheduled a video call (Zoom/Google Meet) for Saturday at 9:30-10 AM IST to resolve the positioning issue together.
Resolution: Ongoing—awaiting scheduled call to fix CSS positioning.
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!
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.
Okay so open your card-product.liquid file and add all this code
//////////// Code ////////////
{% if card_product.available %}
<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 }}
{% endfor %}
{% endif %}
{% endfor %}
Place this code here
Just between the two closing div’s. You can style it as per your need. Hope this helps.
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!
Send me the store link
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!!!
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.
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!
You will need to add my code as well in this duplicate theme from the code editor like you did for the live one
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!!!
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
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
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.
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!
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.
Ah ok, I can do next week, what are some times that work for you?
Yeah, let’s do mon around 3 to 3:30 pm IST.
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?
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
