DEBUT THEME | Show variants in collection

[polloandpaco]

Good afternoon,

I would like to show all variants of a product in the collection grid.

Just as shown:

I would also like it to be shown like the example and not in a drag down list, like some apps offer.

I understand code changes according to the shopify theme, mine is DEBUT.

Can someone help?

Thank you

[LitCommerce · Accepted solution]

Hi @polloandpaco,

Please go to snippets/product-card-grid.liquid file and add code here: https://i.imgur.com/TqphQI7.png 

<div class="grid-view-item__variant">
    {% for variant in product.variants %}
      {% if variant.available %}
        <span style="padding:0 5px;">{{ variant.title | escape}}</span>
      {% else %}
        <span style="padding:0 5px;color:#808080;text-decoration:line-through;">{{ variant.title | escape}}</span>
      {% endif %}
    {% endfor %}
  </div>

 Hope it helps!

[polloandpaco]

You are a star! Super helpful and easy! Thank you so much

[polloandpaco]

Hi again,

Sorry, how can i center it?

Thank you

[LitCommerce]

Hi @polloandpaco,

Please change code:

<div class="grid-view-item__variant" style="text-align: center;">
{% for variant in product.variants %}
  {% if variant.available %}
	<span style="padding:0 5px;">{{ variant.title | escape}}</span>
  {% else %}
	<span style="padding:0 5px;color:#808080;text-decoration:line-through;">{{ variant.title | escape}}</span>
  {% endif %}
{% endfor %}
</div>

Hope it helps!

[plfunkymusic]

Hi - I've just had a go adding this and didn't see any change, although I may not have my collections configured correctly - esp. as we are using gempages...  Another question - Will this work if we only want to show different colours in the collection.  We are selling clothes with both colours and sizes as variants.  Do I need something checking the variant for "option1"  in there?