Using variants on the collection page instead of products

[sellingstuff]

I have a product with 3 colours and 4 sizes.  Not all colours have all 4 sizes. I want to output the 3 colours variants on the collection page instead of just the one product, and underneath I want to show the sizes that are available for that colour.

My code works ok, and just outputs one variant from each colour.  However I'm stuggling to write the code that will match up which colours have which sizes.  At the moment this just outputs all the available sizes for the product not the available sizes for the variant.

This is my code.

{% for product in collection.products %}
{% assign options = product.options %}
{% assign have_color = false %}
{% assign size_index = false %}
{% for option in options %}
{% comment %}Check if there is a color option{% endcomment %}
{% if option == "Color" or option == "Colour" %}
{% assign have_color = forloop.index0 %}

{% endif %}
{% comment %}Get the size index{% endcomment %}
{% if option == "Size" %}
{% assign size_index = forloop.index0 %}
{% endif %}
{% endfor %}

{% for variant in product.variants %}
<!-- <h1>{{ variant.id }} {{ variant.option1 }} and {{ variant.option2}}</h1> -->

{% for option in options %}
{% comment %}Check if there is a color option{% endcomment %}
{% if option == "Color" or option == "Colour" %}
{% assign have_color = forloop.index0 %}
{% endif %}
{% comment %}Get the size index{% endcomment %}
{% if option == "Size" %}
{% assign size_index = forloop.index0 %}
{% endif %}
{% endfor %}
{% endfor %}

{% if have_color != false %}
{% assign variants = product.variants %}
{% assign colorlist = '' %}
{% assign sizelist = '' %}
{% assign color = '' %}

{% comment %}Get All Sizes{% endcomment %}
{% for variant in variants %}
{% comment %}We use the @ to wrap the string since sizes tend to have parts of other sizes, example S,XS,L,XL,XXL{% endcomment %}
{% assign string_check = variant.options[size_index] | append: '@' | prepend: '@' %}
{% unless sizelist contains string_check %}
{% capture sizelist %}{% unless forloop.first %}{{sizelist}},{% endunless %}@{{ variant.options[size_index] }}@{% endcapture %}
{% endunless %}
{% endfor %}

{% assign sizelist_array = sizelist | replace: '@', '' | split: ',' %}
{% for variant in variants %}
{% capture color %}
{{ variant.options[have_color] }}
{% endcapture %}
{% unless colorlist contains color %}
{% assign product = variant %}
<a class="product" href="{{ product.url | within: collection }}">
{%- assign image_src=variant.image.src -%}
<img class="featured-card__image lazyload"
src="{{ image_src | img_url: '420x' }}" alt="{{ image_src.alt | escape }}"
srcset="
{% if image_src.width > 640 %}{{ image_src | img_url: '640x' }} 640w{% endif %}
{% if image_src.width > 720 %},{{ image_src | img_url: '720x' }} 720w{% endif %}
{% if image_src.width > 900 %},{{ image_src | img_url: '900x' }} 900w{% endif %}"
sizes="(min-width: 960px) 450px, (min-width: 720px) 50vw, 100vw"
style="max-height: {{ maximum_height }}px;">
{{ product.title }} and {{ color | uppercase}} and the price is {{ product.price | money_with_currency }} - link <a href="{{ product.url | within: collection }}?variant={{ variant.id }}" style="background:{{ color | downcase }}">{{ color | downcase }}</a>
<h2>Available sizes</h2>
<ul class="product__sizes">
{% for size in sizelist_array %}
{% if variant.available %}
<li>
{{ size }} | {{ color }}
</li>
{% endif %}
{% endfor %}
</ul>
</a>
{% capture tempList %}
{{colorlist | append: color | append: ' '}}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}