Size variants in collection page

Question

This is our website: https://bohemianvibes.com.au/

Our main issue is the size variants in the collection pages. For example, this collection - https://bohemianvibes.com.au/collections/all-quilt-cover-sets

You will see the size variants below each product. However, for items with no size variants, like in this collection https://bohemianvibes.com.au/collections/round-beach-towels

you will see DEFAULT TITLE below the products. How can we remove that?

We want to show the size variants below each product in the collection page EXCLUDING those items with no size variants.

I hope you can guide me through the steps and where shall I input the codes.

For now, I only touched the PRODUCT-GRID-ITEM.LIQUID. Below is the code:

{% for option in product.options %}
{% if option == 'Size' %}  **I changed this 'Size' to something else I want**
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}

{% unless colorlist contains color %}
  {% if variant.available %}

  <li id="{{ variant.id }}" title="{{ variant.inventory_quantity }} In Stock" class="avactive"><a href="{{ product.url | within: collection }}?variant={{ variant.id }}">{{ color | downcase }}</a></li>

  {% else %}

  <li id="{{ variant.id }}" title="Out of Stock"  class="notactve" >{{ color | downcase }}</li>

  {% endif %}

{% capture tempList %}
{{colorlist | append: color | append: " " }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>

Maciej Tokarczyk Maciej Tokarczyk · Accepted Answer · 2019-06-25T07:09:52

There is a property called product.has_only_default_variant You can use it to determine if product has different variant than default one.

I would wrap the code with {% unless product.has_only_default_variant %} "your code here" {% endunless %}

Size variants in collection page

1 Answers