Get related (separate products) products by colour - show as a swatch

related-colour-products.liquid

<section class="related-colour-products__outer" aria-labelledby="related-colour-products-label">
  {%- assign related_colour_products = product.metafields.custom.related_colour_products.value -%}
  {% assign colors = product.metafields.shopify['color-pattern'].value %}
  {% assign color_label = '' %}

  {% for color in colors limit: 1 %}
    {% assign color_label = color.label %}
  {% endfor %}

  <p class="related-colour-products__label">Colour: {{ color_label }}</p>

  <ul class="related-colour-products__swatches" role="listbox" aria-label="Related colour options">
    {% for color in colors limit: 1 %}
      {% assign color_label = color.label %}
      <li
        class="related-colour-products__swatch related-colour-products__swatch--active"
        role="option"
        aria-selected="true"
        tabindex="0"
      >
        <a href="{{ product.url }}" title="{{ product.title }}" aria-current="page">
          <span class="visually-hidden">{{ product.title }}</span>
          {% if color.image %}
            <img src="{{ color.image | image_url }}" alt="{{ color.label }}" class="related-colour-products__img">
          {% else %}
            <span
              class="swatch"
              style="background-color: {{ color.color }};"
              data-color-label="{{ color.label }}"
              aria-label="{{ color.label }}"
              role="img"
            ></span>
          {% endif %}
        </a>
      </li>
    {% endfor %}
    {% for product in related_colour_products %}
      {% assign colors = product.metafields.shopify['color-pattern'].value %}
      {% for color in colors limit: 1 %}
        <li class="related-colour-products__swatch" role="option" aria-selected="false" tabindex="0">
          <a href="{{ product.url }}" title="{{ product.title }}">
            <span class="visually-hidden">{{ product.title }}</span>
            {% if color.image %}
              <img src="{{ color.image |  image_url }}" alt="{{ color.label }}" class="related-colour-products__img">
            {% else %}
              <span
                class="swatch"
                style="background-color: {{ color.color }};"
                aria-label="{{ color.label }}"
                role="img"
              ></span>
            {% endif %}
          </a>
        </li>
      {% endfor %}
    {% endfor %}
  </ul>
</section>