Shopify Simple Theme - product-grid-item.liquid modified to support alternative images

Shopify Simple Theme - product-grid-item

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

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

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

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

{%- comment -%}
  Different product images based on viewed collection
  Tutorial: https://sections.design/blogs/shopify/different-product-images-on-collections
{%- endcomment -%}

{%- assign featured_image = product.featured_image  -%}
{%- assign product_url = product.url -%}

{%- if custom_option_name != blank and custom_option_value != blank -%}
  {%- assign custom_option_name = custom_option_name | downcase | strip -%}
  {%- assign custom_option_value = custom_option_value | downcase | strip -%}

  {%- for product_option in product.options_with_values -%}
    {%- assign option_name = product_option.name | handle -%}
    {%- if option_name == custom_option_name -%}
      {%- assign option_values = product_option.values | join: ',' | downcase | split: ',' -%}
      {%- for option_value in option_values -%}
        {%- if option_value == custom_option_value -%}
          {%- assign custom_variant = product.variants[forloop.index0] -%}
          {%- if custom_variant.featured_image -%}
            {%- assign featured_image = custom_variant.featured_image -%}
            {%- assign product_url = custom_variant.url -%}
          {%- endif -%}
          {% break %}
        {%- endif -%}
      {%- endfor -%}
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}

{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

<div class="product grid__item {{ grid_item_width }} slide-up-animation animated" role="listitem">
  {% unless featured_image  == blank %}
    <div class="supports-js" style="max-width: {{ 600 | times: featured_image.aspect_ratio | round }}px; margin: 0 auto;">
      <a href="{{ product_url | within: collection }}" class="product__image-wrapper" style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100}}%;" title="{{ product.title | escape }}">
        <img class="product__image lazyload"
             src="{{ featured_image  | img_url: '150x150' }}"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ featured_image.aspect_ratio }}"
             data-sizes="auto"
             alt="{{ featured_image.alt | escape }}"
             style="max-width: {{ 600 | times: featured_image.aspect_ratio | round }}px; max-height: 600px;">
      </a>
    </div>
  {% else %}
    <a href="{{ product_url | within: collection }}" class=" supports-js product__image-wrapper" title="{{ product.title | escape }}">
      <img src="{{ featured_image.src | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
    </a>
  {% endunless %}

  <noscript>
    <a href="{{ product_url | within: collection }}" class="product__image-wrapper" title="{{ product.title | escape }}">
      <img src="{{ featured_image.src | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
    </a>
  </noscript>

  <div class="product__title text-center">
    <a href="{{ product_url | within: collection }}">{{ product.title }}</a>
  </div>

  {% if section.settings.vendor_show %}
    <div class="product__vendor text-center">
      {{ product.vendor }}
    </div>
  {% endif %}

  <div class="product__prices text-center">
    {% if product.compare_at_price > product.price %}

      <span class="product__price--on-sale">
        {% if product.price_varies %}
          {% assign sale_price = product.price | money %}
          {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
        {% else %}
          <strong class="visually-hidden">{{ 'products.product.sale_price' | t }}</strong>
          {{ product.price | money }}
        {% endif %}
      </span>

    {% else %}

      <span class="product__price">
        {% if product.price_varies %}
          {% assign price = product.price | money %}
          {{ 'products.product.from_text_html' | t: price: price }}
        {% else %}
          <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
          {{ product.price | money }}
        {% endif %}
      </span>

    {% endif %}

    {% if product.compare_at_price > product.price %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s>{{ product.compare_at_price | money }}</s>
    {% endif %}

    {% if on_sale %}
      <span class="badge badge--sale"><span>{{ 'products.product.on_sale' | t }}</span></span>
    {% endif %}

    {% comment %}
    {% if sold_out %}
      <span class="badge badge--sold-out"><span>{{ 'products.product.sold_out' | t }}</span></span>
    {% endif %}
    {% endcomment %}

    {% if sold_out %}
      — <strong class="sold-out-text">{{ 'products.product.sold_out' | t }}</strong>
    {% endif %}

  </div>
</div>

Hello,

Thanks a lot for this! It helped me a lot.
I made some adjustments to suit my case. I found that some times the script as problems with colors that have more than one word eg Navy Blue.
Also, I replaced the is equals with contains and created a simpler loop when I expect to have color always as 1st option.

{%- assign product_url = product.url -%}
{%- if custom_option_name != blank and custom_option_value != blank -%}
{%- assign custom_option_name = custom_option_name | downcase | strip -%}
{%- assign custom_option_value = custom_option_value | downcase | strip -%}
{% for variant in product.variants %}
{% assign variant_color = variant.option1 | downcase %}
{% if variant_color contains custom_option_value %}
{%- assign custom_variant = product.variants[forloop.index0] -%}
{%- assign featured_image = custom_variant.image -%}
{%- assign product_url = custom_variant.url -%}
{% break %}
{%- endif -%}
{%- endfor -%}
{%- endif -%}