How to display Available Size Variants on collection page?

JSVartare
Visitor
2 0 0

Hello guys! 

I'm trying to figure out a way to add the available size variants on the collection page, either over the product image or underneath, here are a couple of examples of what I mean:

Screenshot 2023-07-24 at 11.33.22 am.png 

Screenshot 2023-07-24 at 11.33.49 am.png

I've tried adding snippets and codes I've found here in the forum and elsewhere but the solutions are quite limited and when included the size variants are displayed in a wrong alignment or showing all variants including the unavailable ones, here are some examples:

 

Screenshot 2023-07-24 at 11.53.50 am.png 

Screenshot 2023-07-24 at 11.50.07 am.png

Any light on this issue will be highly appreciated, thank you very much in advance!

Replies 4 (4)

Transcy
Shopify Partner
285 19 84

Hello @JSVartare ,

 

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code

Go to Section -> collection-template.liquid file or something name similar to this

Find the loop that iterates through the products in the collection like this

{% for product in collection.products %}
  <!-- Product HTML markup goes here -->
{% endfor %}

Inside the loop, modify the code like this example

{% for variant in product.variants %}
  {% if variant.available %}
    <p>{{ variant.title }}</p>
  {% endif %}
{% endfor %}

Save and preview

 

Hope this can help.

Transcy

Transcy - The #1 Translation and Currency Converter
- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog
JSVartare
Visitor
2 0 0

Thank you very much! I'll test it out and get back here to let you know if it worked.

penelopeew
Visitor
1 0 0

Hey Transcy! 

 

This worked for me,  but it added the variants as a vertical list. Is there a way to make the list horizontal? 

 

Kindest,

Penny

KabirDev
Shopify Partner
248 61 67

For anyone trying to showcase all product variants and their prices in Shopify collections, here's a video that could help.

 

- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com