Show all variants as separate products on the collection page on the Minimal Theme - https://dylanjh.com

Show all variants as separate products on the collection page on the Minimal Theme

{% if product.variants.size > 1 %}
{% 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 %}


{% unless current_collection == blank %}
  {% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% assign sale_text = 'products.product.sale' | t %}
{% if variant.compare_at_price > variant.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% assign sold_out_text = 'products.product.sold_out' | t %}
{% if variant.available %}
  {% assign sold_out = false %}
{% endif %}

{% if variant.title == '' %}
  {% comment %}add default state for product block in storefront editor{% endcomment %}
  {% capture product_title %}{{ 'home_page.onboarding.product_title' | t }}{% endcapture %}
{% else %}
  {% capture product_title %}{{ product.title }} - {{ variant.title | escape }}{% endcapture %}
{% endif %}

<div class="{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
  <a href="{{ variant.url | within: collection }}" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">
    <span class="grid-link__image{% if section.settings.show_sold_out_circle %} grid-link__image-sold-out{% endif %} grid-link__image--product">
      {% if on_sale and section.settings.show_sale_circle %}
        <span class="badge badge--sale">
          <span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
        </span>
      {% endif %}
      {% if sold_out and section.settings.show_sold_out_circle %}
        <span class="badge badge--sold-out">
          <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
        </span>
      {% endif %}
      <span class="grid-link__image-centered">
        {% if variant.title != '' %}
          {% unless variant.featured_image == blank %}
            {% capture img_id %}ProductImage-{{ variant.featured_image.id }}{% endcapture %}
            {% capture wrapper_id %}ProductImageWrapper-{{ variant.featured_image.id }}{% endcapture %}
            {%- assign img_url = variant.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

            {% include 'image-style' with image: variant.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
            <div id="{{ wrapper_id }}" class="product__img-wrapper supports-js">
              <div style="padding-top:{{ 1 | divided_by: variant.featured_image.aspect_ratio | times: 100}}%;">
                <img id="{{ img_id }}"
                     class="product__img lazyload"
                     src="{{ variant.featured_image | img_url: '300x300' }}"
                     data-src="{{ img_url }}"
                     data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
                     data-aspectratio="{{ variant.featured_image.aspect_ratio }}"
                     data-sizes="auto"
                     alt="{{ variant.featured_image.alt | escape }}">
              </div>
            </div>
          {% else %}
            <img src="{{ variant.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
          {% endunless %}
          <noscript>
            <img src="{{ variant.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
          </noscript>
        {% else %}
          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </span>
    </span>
    <p class="grid-link__title">{{ product_title }}</p>
    {% if section.settings.vendor_enable %}
      <p class="grid-link__title grid-link__vendor">{{ featured.vendor }}</p>
    {% endif %}
    {% if featured.title != '' %}
      <p class="grid-link__meta">
        {% capture price %}{{ variant.price | money }}{% endcapture %}
        {% if on_sale %}
        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
        <s class="grid-link__sale_price">{{ variant.compare_at_price | money }}</s>
        {% endif %}
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
          {% endif %}
          {{ price }}
      </p>
    {% endif %}
  </a>
</div>
{% unless forloop.last %}
</div>
<div class="grid__item {{grid_item_width}}">
{% endunless %}
 {% capture tempList %}
    {{colorlist | append: color | append: " " }}
    {% endcapture %}
    {% assign colorlist = tempList %}
    {% endunless %}
    {% endfor %}
  {% endif %}
{% endfor %}
{% else %}
{% unless current_collection == blank %}
  {% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% assign sale_text = 'products.product.sale' | t %}
{% if featured.compare_at_price > featured.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% assign sold_out_text = 'products.product.sold_out' | t %}
{% if featured.available %}
  {% assign sold_out = false %}
{% endif %}

{% if featured.title == '' %}
  {% comment %}add default state for product block in storefront editor{% endcomment %}
  {% capture product_title %}{{ 'home_page.onboarding.product_title' | t }}{% endcapture %}
{% else %}
  {% capture product_title %}{{ featured.title | escape }}{% endcapture %}
{% endif %}

<div class="{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
  <a href="{{ featured.url | within: collection }}" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">
    <span class="grid-link__image{% if section.settings.show_sold_out_circle %} grid-link__image-sold-out{% endif %} grid-link__image--product">
      {% if on_sale and section.settings.show_sale_circle %}
        <span class="badge badge--sale">
          <span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
        </span>
      {% endif %}
      {% if sold_out and section.settings.show_sold_out_circle %}
        <span class="badge badge--sold-out">
          <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
        </span>
      {% endif %}
      <span class="grid-link__image-centered">
        {% if featured.title != '' %}
          {% unless featured.featured_image == blank %}
            {% capture img_id %}ProductImage-{{ featured.featured_image.id }}{% endcapture %}
            {% capture wrapper_id %}ProductImageWrapper-{{ featured.featured_image.id }}{% endcapture %}
            {%- assign img_url = featured.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

            {% include 'image-style' with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
            <div id="{{ wrapper_id }}" class="product__img-wrapper supports-js">
              <div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
                <img id="{{ img_id }}"
                     class="product__img lazyload"
                     src="{{ featured.featured_image | img_url: '300x300' }}"
                     data-src="{{ img_url }}"
                     data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
                     data-aspectratio="{{ featured.featured_image.aspect_ratio }}"
                     data-sizes="auto"
                     alt="{{ featured.featured_image.alt | escape }}">
              </div>
            </div>
          {% else %}
            <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
          {% endunless %}
          <noscript>
            <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
          </noscript>
        {% else %}
          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </span>
    </span>
    <p class="grid-link__title">{{ product_title }}</p>
    {% if section.settings.vendor_enable %}
      <p class="grid-link__title grid-link__vendor">{{ featured.vendor }}</p>
    {% endif %}
    {% if featured.title != '' %}
      <p class="grid-link__meta">
        {% capture price %}{{ featured.price | money }}{% endcapture %}
        {% if on_sale %}
        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
        <s class="grid-link__sale_price">{{ featured.compare_at_price | money }}</s>
        {% endif %}
        {% if featured.price_varies %}
          {{ 'products.general.from_html' | t: price: price }}
        {% else %}
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
          {% endif %}
          {{ price }}
        {% endif %}
      </p>
    {% endif %}
  </a>
</div>
{% endif %}