DEBUT THEME | Show variants in collection

Technical Q&A
1

Good afternoon,

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

Just as shown:

Captura de pantalla 2021-12-02 a las 18.45.47.png
Captura de pantalla 2021-12-02 a las 18.45.47.png2072Ă—1038 141 KB

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

2

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!

2 Likes
3

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

4

Hi again,

Sorry, how can i center it?

Thank you

5

Hi @polloandpaco ,

Please change code:


{% for variant in product.variants %}
  {% if variant.available %}
	{{ variant.title | escape}}
  {% else %}
	{{ variant.title | escape}}
  {% endif %}
{% endfor %}

Hope it helps!

6

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?