Showing variants as separate products on the Impulse Shopify theme - https://dylanjh.com

impulse theme show variants separately

{% 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' 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 %}

{% unless grid_item_width %}
  {%- assign grid_item_width = 'medium-up--one-quarter small--one-half' -%}
{% endunless %}

{%- assign on_sale = false -%}
{% if product.compare_at_price > product.price %}
  {%- assign on_sale = true -%}
{% endif %}

{%- assign sold_out = true -%}
{% if product.available %}
  {%- assign sold_out = false -%}
{% endif %}

{%- assign product_tags = product.tags | join: ',' -%}
{%- assign has_custom_label = false -%}
{% if product_tags contains '_label_' %}
  {% for tag in product.tags %}
    {% if tag contains '_label_' %}
      {%- assign tag_starts_with = tag | slice: 0 -%}
      {% if tag_starts_with == '_' %}
        {%- assign has_custom_label = true -%}
        {%- assign custom_label = tag | replace: '_label_', '' -%}
      {% endif %}
    {% endif %}
  {% endfor %}
{% endif %}

<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable and sold_out == false %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}">
  <div class="grid-product__content">
    {% if has_custom_label %}
      <div class="grid-product__tag grid-product__tag--custom">
        {{ custom_label }}
      </div>
    {% else %}
      {% if sold_out %}
        <div class="grid-product__tag grid-product__tag--sold-out">
          {{ 'products.product.sold_out' | t }}
        </div>
      {% endif %}
      {% if on_sale and sold_out == false %}
        <div class="grid-product__tag grid-product__tag--sale">
          {{ 'products.general.sale' | t }}
        </div>
      {% endif %}
    {% endif %}

    {%- assign fixed_aspect_ratio = false -%}
    {% unless settings.product_grid_image_size == 'natural' %}
      {%- assign fixed_aspect_ratio = true -%}
    {% endunless %}

    <a href="{{ variant.url | within: collection }}" class="grid-product__link {% if sold_out %} grid-product__link--disabled{% endif %}">
      <div class="grid-product__image-mask">
        {% if settings.quick_shop_enable and sold_out == false %}
          <div class="quick-product__btn js-modal-open-quick-modal-{{ product.id }} small--hide" data-product-id="{{ product.id }}">
            <span class="quick-product__label">{{ settings.quick_shop_text }}</span>
          </div>
        {% endif %}
        {% if fixed_aspect_ratio %}
          <div
            class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }} lazyload"
            data-bgset="{% include 'bgset', image: variant.image %}"
            data-sizes="auto">
          </div>
        {% else %}
          <div class="image-wrap"
            style="height: 0; padding-bottom: {{ 100 | divided_by: variant.image.aspect_ratio }}%;"
            >
            {%- assign img_url = variant.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <img class="grid-product__image lazyload"
                data-src="{{ img_url }}"
                data-widths="[180, 360, 540, 720, 900, 1080]"
                data-aspectratio="{{ variant.image.aspect_ratio }}"
                data-sizes="auto"
                alt="{{ variant.image.alt | escape }}">
            <noscript>
              <img class="grid-product__image lazyloaded"
                src="{{ variant.image | img_url: '400x' }}"
                alt="{{ variant.image.alt | escape }}">
            </noscript>
          </div>
        {% endif %}

        {% unless sold_out %}
          {% if settings.product_hover_image and product.images.size > 1 %}
            {% for image in product.images offset: 1 limit: 1 %}
              {%- assign second_image = image -%}
            {% endfor %}
            <div
              class="grid-product__secondary-image small--hide lazyload"
              data-bgset="{% include 'bgset', image: second_image %}"
              data-sizes="auto">
            </div>
          {% endif %}
        {% endunless %}

        {% if settings.collection_color_swatches %}
          {% for option in product.options_with_values %}
            {%- assign option_name = option.name | downcase -%}
            {% if option_name contains 'color' or option_name contains 'colour' %}
              {%- assign option_index = forloop.index0 -%}
              {%- assign values = '' -%}
              {% for variant in product.variants %}
                {%- assign value = variant.options[option_index] %}
                {% unless values contains value %}
                  {%- assign values = values | join: ',' %}
                  {%- assign values = values | append: ',' | append: value %}
                  {%- assign values = values | split: ',' %}

                  {% if variant.image %}
                    <div
                      class="grid-product__color-image grid-product__color-image--{{ variant.id }} small--hide">
                    </div>
                  {% endif %}
                {% endunless %}
              {% endfor %}
            {% endif %}
          {% endfor %}
        {% endif %}
      </div>

      <div class="grid-product__meta">
        <div class="grid-product__title grid-product__title--{{ settings.type_product_style }}">{{ product.title }}</div>
        {% if settings.vendor_enable %}
          <div class="grid-product__vendor">{{ product.vendor }}</div>
        {% endif %}
        <div class="grid-product__price">
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            <span class="grid-product__price--original">{{ product.compare_at_price | money }}</span>
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {% endif %}
          {% if product.price_varies %}
            {%- assign price = product.price_min | money -%}
            {{ 'products.general.from_text_html' | t: price: price }}
          {% else %}
            {{ product.price  | money }}
          {% endif %}
          {% if on_sale %}
            {% if settings.product_save_amount %}
              {% if settings.product_save_type == 'dollar' %}
                {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money }}{% endcapture %}
              {% else %}
                {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%{% endcapture %}
              {% endif %}
              <span class="grid-product__price--savings">
                {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
              </span>
            {% endif %}
          {% endif %}
        </div>
        {% if settings.enable_product_reviews %}
          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
        {% endif %}
      </div>
    </a>
  </div>
  {% if settings.collection_color_swatches %}
    {%- assign swatch_file_extension = 'png' -%}
    {%- assign color_count = 0 -%}

    {% for option in product.options_with_values %}
      {%- assign option_name = option.name | downcase -%}
      {% if option_name contains 'color' or option_name contains 'colour' %}
        {%- assign option_index = forloop.index0 -%}
        {%- assign values = '' -%}
        <div class="grid-product__colors grid-product__colors--{{ product.id }}">
          {% for variant in product.variants %}
            {%- assign value = variant.options[option_index] %}
            {% unless values contains value %}
              {%- assign values = values | join: ',' %}
              {%- assign values = values | append: ',' | append: value %}
              {%- assign values = values | split: ',' %}

              {%- assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' | split: '?' | first -%}
              {%- assign color_swatch_fallback = value | split: ' ' | last | handle -%}
              {%- assign color_count = color_count | plus: 1 -%}

              <a
                href="{{ variant.url | within: collection }}"
                class="color-swatch color-swatch--small color-swatch--{{ value | handle }}{% if variant.image %} color-swatch--with-image{% endif %}"
                {% if variant.image %}
                  data-variant-id="{{ variant.id }}"
                  data-variant-image="{{ variant.image | img_url: '400x' }}"
                {% endif %}
                style="background-image: url({{ color_image }}); background-color: {{ color_swatch_fallback }};">
              </a>
            {% endunless %}
           {% endfor %}
        </div>
        {% if color_count < 2 %}
          {% style %}
            .grid-product__colors--{{ product.id }} {
              display: none;
            }
          {% endstyle %}
        {% endif %}
      {% endif %}
    {% endfor %}
  {% endif %}
</div>

{% capture tempList %}
    {{colorlist | append: color | append: " " }}
    {% endcapture %}
    {% assign colorlist = tempList %}
    {% endunless %}
    {% endfor %}
  {% endif %}
{% endfor %}
{% else %}


{% unless grid_item_width %}
  {%- assign grid_item_width = 'medium-up--one-quarter small--one-half' -%}
{% endunless %}

{%- assign on_sale = false -%}
{% if product.compare_at_price > product.price %}
  {%- assign on_sale = true -%}
{% endif %}

{%- assign sold_out = true -%}
{% if product.available %}
  {%- assign sold_out = false -%}
{% endif %}

{%- assign product_tags = product.tags | join: ',' -%}
{%- assign has_custom_label = false -%}
{% if product_tags contains '_label_' %}
  {% for tag in product.tags %}
    {% if tag contains '_label_' %}
      {%- assign tag_starts_with = tag | slice: 0 -%}
      {% if tag_starts_with == '_' %}
        {%- assign has_custom_label = true -%}
        {%- assign custom_label = tag | replace: '_label_', '' -%}
      {% endif %}
    {% endif %}
  {% endfor %}
{% endif %}

<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable and sold_out == false %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}">
  <div class="grid-product__content">
    {% if has_custom_label %}
      <div class="grid-product__tag grid-product__tag--custom">
        {{ custom_label }}
      </div>
    {% else %}
      {% if sold_out %}
        <div class="grid-product__tag grid-product__tag--sold-out">
          {{ 'products.product.sold_out' | t }}
        </div>
      {% endif %}
      {% if on_sale and sold_out == false %}
        <div class="grid-product__tag grid-product__tag--sale">
          {{ 'products.general.sale' | t }}
        </div>
      {% endif %}
    {% endif %}

    {%- assign fixed_aspect_ratio = false -%}
    {% unless settings.product_grid_image_size == 'natural' %}
      {%- assign fixed_aspect_ratio = true -%}
    {% endunless %}

    <a href="{{ product.url | within: collection }}" class="grid-product__link {% if sold_out %} grid-product__link--disabled{% endif %}">
      <div class="grid-product__image-mask">
        {% if settings.quick_shop_enable and sold_out == false %}
          <div class="quick-product__btn js-modal-open-quick-modal-{{ product.id }} small--hide" data-product-id="{{ product.id }}">
            <span class="quick-product__label">{{ settings.quick_shop_text }}</span>
          </div>
        {% endif %}
        {% if fixed_aspect_ratio %}
          <div
            class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }} lazyload"
            data-bgset="{% include 'bgset', image: product.featured_image %}"
            data-sizes="auto">
          </div>
        {% else %}
          <div class="image-wrap"
            style="height: 0; padding-bottom: {{ 100 | divided_by: product.featured_image.aspect_ratio }}%;"
            >
            {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <img class="grid-product__image lazyload"
                data-src="{{ img_url }}"
                data-widths="[180, 360, 540, 720, 900, 1080]"
                data-aspectratio="{{ product.featured_image.aspect_ratio }}"
                data-sizes="auto"
                alt="{{ product.featured_image.alt | escape }}">
            <noscript>
              <img class="grid-product__image lazyloaded"
                src="{{ product.featured_image | img_url: '400x' }}"
                alt="{{ product.featured_image.alt | escape }}">
            </noscript>
          </div>
        {% endif %}

        {% unless sold_out %}
          {% if settings.product_hover_image and product.images.size > 1 %}
            {% for image in product.images offset: 1 limit: 1 %}
              {%- assign second_image = image -%}
            {% endfor %}
            <div
              class="grid-product__secondary-image small--hide lazyload"
              data-bgset="{% include 'bgset', image: second_image %}"
              data-sizes="auto">
            </div>
          {% endif %}
        {% endunless %}

        {% if settings.collection_color_swatches %}
          {% for option in product.options_with_values %}
            {%- assign option_name = option.name | downcase -%}
            {% if option_name contains 'color' or option_name contains 'colour' %}
              {%- assign option_index = forloop.index0 -%}
              {%- assign values = '' -%}
              {% for variant in product.variants %}
                {%- assign value = variant.options[option_index] %}
                {% unless values contains value %}
                  {%- assign values = values | join: ',' %}
                  {%- assign values = values | append: ',' | append: value %}
                  {%- assign values = values | split: ',' %}

                  {% if variant.image %}
                    <div
                      class="grid-product__color-image grid-product__color-image--{{ variant.id }} small--hide">
                    </div>
                  {% endif %}
                {% endunless %}
              {% endfor %}
            {% endif %}
          {% endfor %}
        {% endif %}
      </div>

      <div class="grid-product__meta">
        <div class="grid-product__title grid-product__title--{{ settings.type_product_style }}">{{ product.title }}</div>
        {% if settings.vendor_enable %}
          <div class="grid-product__vendor">{{ product.vendor }}</div>
        {% endif %}
        <div class="grid-product__price">
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            <span class="grid-product__price--original">{{ product.compare_at_price | money }}</span>
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {% endif %}
          {% if product.price_varies %}
            {%- assign price = product.price_min | money -%}
            {{ 'products.general.from_text_html' | t: price: price }}
          {% else %}
            {{ product.price  | money }}
          {% endif %}
          {% if on_sale %}
            {% if settings.product_save_amount %}
              {% if settings.product_save_type == 'dollar' %}
                {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money }}{% endcapture %}
              {% else %}
                {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%{% endcapture %}
              {% endif %}
              <span class="grid-product__price--savings">
                {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
              </span>
            {% endif %}
          {% endif %}
        </div>
        {% if settings.enable_product_reviews %}
          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
        {% endif %}
      </div>
    </a>
  </div>
  {% if settings.collection_color_swatches %}
    {%- assign swatch_file_extension = 'png' -%}
    {%- assign color_count = 0 -%}

    {% for option in product.options_with_values %}
      {%- assign option_name = option.name | downcase -%}
      {% if option_name contains 'color' or option_name contains 'colour' %}
        {%- assign option_index = forloop.index0 -%}
        {%- assign values = '' -%}
        <div class="grid-product__colors grid-product__colors--{{ product.id }}">
          {% for variant in product.variants %}
            {%- assign value = variant.options[option_index] %}
            {% unless values contains value %}
              {%- assign values = values | join: ',' %}
              {%- assign values = values | append: ',' | append: value %}
              {%- assign values = values | split: ',' %}

              {%- assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' | split: '?' | first -%}
              {%- assign color_swatch_fallback = value | split: ' ' | last | handle -%}
              {%- assign color_count = color_count | plus: 1 -%}

              <a
                href="{{ variant.url | within: collection }}"
                class="color-swatch color-swatch--small color-swatch--{{ value | handle }}{% if variant.image %} color-swatch--with-image{% endif %}"
                {% if variant.image %}
                  data-variant-id="{{ variant.id }}"
                  data-variant-image="{{ variant.image | img_url: '400x' }}"
                {% endif %}
                style="background-image: url({{ color_image }}); background-color: {{ color_swatch_fallback }};">
              </a>
            {% endunless %}
           {% endfor %}
        </div>
        {% if color_count < 2 %}
          {% style %}
            .grid-product__colors--{{ product.id }} {
              display: none;
            }
          {% endstyle %}
        {% endif %}
      {% endif %}
    {% endfor %}
  {% endif %}
</div>
{% endif %}