Is this a good way of displaying available variant color and size under a product on collections?

35 1 1

So i have a collection page with products on it as usual.

So i have 2 things under my product image

1. Available color

2. Available size 

So here is how i coded it 

{% assign colors = '' %}
                          {% for variant in product.variants %}
                            {% if variant.available %}
                              {% assign colors = colors | append: variant.options[1] | append: '_' %}
                            {% endif %}
                          {% endfor %}
                        {% assign colorsArr = colors | split: '_' | uniq %}

                        {% for color in colorsArr %}
                          <span style="background-color:{{ color }}; border-width:5px; border-radius:50%; display:inline-block; border: 1px solid black"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  </span>
                        {% endfor %}

This is how it looks currentlyAnnotation 2019-08-02 135951.png


1 Like
Shopify Partner
1219 101 155

I appreciate your efforts, However, it would be better practice if you can just show color variant only as it looks clumsy at the Collection page. You can show both the variants on product page anyway.


Hope it helps!



Perennial Solution

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
35 1 1

Thanks for the reply and the suggestion. But my goal here was whenever someone hovers at a product i would show this information. So my plan here was : Let's say you were looking for a XL item and you didnt wanted to filter the size right out from the collection page and just wanted to view all products and lets say you liked a product and you went in only to realise it didn't had a XL version, would be a bit  annoying right. Well that's what i thought so that was my plan here :D