Shopify show color variants in collection but not size variant

Question

Goal to show just additional color variants on Collection page in Shopify. Using the Supply theme. I am displaying all variant images in collections, but would like to just display the color variant if variants exist. Some items have no variants, some have size variant. Some have color, and some have size and color. I do not want to show all size variants for a color on the collection page. Collection.liquid

  {% for product in collection.products %}
    {% for variant in product.variants %} 
    {% if has_sidebar %}
      {% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
    {% else %}
      {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
    {% endif %}
    {% include 'product-grid-item' %}

  {% else %}

    <div class="grid-item">
      <p>{{ 'collections.general.no_matches' | t }}</p>
    </div>
   {% endfor %}
  {% endfor %}

</div>

product-grid-item.liquid

<div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">

{% if sold_out %} {{ 'products.product.sold_out' | t }} {% endif %} I am thinking I need to check start with an if statement checking for variants, then add a forloop for color. {% for option in product.options %} {% if option == 'Color' %}

Any help would be appreciated.

MyShopify Consultants MyShopify Consultants · Accepted Answer · 2016-11-04T00:38:01

Something like this should get you started.

First we loop the product options, then we say we only want colour or color, then we loop over ALL variants which belong to that option... grab the colours and create a list item with the title.

<ul>
{% for option in product.options %}
  {% if option == "Color" or option == "Colour" %}
    {% assign index = forloop.index0 %}
    {% assign colorlist = '' %}
    {% assign color = '' %}
    {% for variant in product.variants %}
      {% capture color %}
        {{ variant.options[index] }}
      {% endcapture %}
      {% unless colorlist contains color %}
        <li><span class="color-{{color | handle }}"><a href="{{variant.id}}">{{color}}</a></span></li>
        {% capture tempList %}
          {{colorlist | append: color | append: ' '}}
        {% endcapture %}
        {% assign colorlist = tempList %}
      {% endunless %}
    {% endfor %}
  {% endif %}
{% endfor %}
</ul>

Shopify show color variants in collection but not size variant

1 Answers