Show All Colors of a Product as Separate Products on the Collection Page

Alright, I see a lot of people asking for this and wanted to provide a guide to help anyone looking to do this. If you have a product such as a swimsuit that has 10 colors, you may want to keep it as one product, but to make your collection page look more 'full', so here is how you can turn that one product into 10 different ones on the collection page, but have the product page stay the same as one product with many variants.

{% for product in collection.products %}
  {% assign color_active = false %}
  {% for option in product.options %}
    {% if option == 'Color' %}
      {% assign color_active = true %}
    {% endif %}
  {% endfor %}

  {% if product.variants.size > 1 and color_active == true %}
    {% for option in product.options %}
      {% if option == 'Color' %}
        {% assign index = forloop.index0 %}
        {% assign colorlist = '' %}
        {% assign color = '' %}
        {% for variant in product.variants %}
          {% capture color %}
            {{ variant.options[index] }}
          {% endcapture %}
          {% unless colorlist contains color %}
            <!-- INSERT VARIANT LOOP -->
            {% capture tempList %}
              {{colorlist | append: color | append: " " }}
            {% endcapture %}
            {% assign colorlist = tempList %}
          {% endunless %}
        {% endfor %}
      {% endif %}
    {% endfor %}
  {% else %}
    <!-- INSERT PRODUCT LOOP -->
  {% endif %}
{% endfor %}

Where you see the VARIANT LOOP that is where you will need to make a new snippet that contains the code from the product loop. This might be a snippet called product-grid-item or product-loop and you'll need to make a new one, perhaps called product-grid-item-variant, and within that you will paste the code from the product grid item, and change the liquid to identify the variant information such as variant.url and variant.image instead of product.featured_image.

Comment below if you're struggling.