I have customized the code in the product-variant-picker.liquid file to show variant images. But I am facing a issue on multiple variation. the issue is on single variation option every thing is working fine the variant image is showing but when i used multiple variation option for a products that time variant image is not showing only variant title text showing. see examples below
Signal variation Product
https://prnt.sc/7PNHCMB8h31S
Multiple variation Product
https://prnt.sc/PSm2JQ0FgiWw
https://prnt.sc/G7iI-LCiCDDA
Below is the my customized code
{% comment %}
Renders product variant-picker
Accepts:
- product: {Object} product object.
- block: {Object} passing the block information.
- product_form_id: {String} Id of the product form to which the variant picker is associated.
- update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
Usage:
{% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}
{%- unless product.has_only_default_variant -%}
{%- if block.settings.picker_type == 'button' -%}
<variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
<fieldset class="js product-form__input">
<legend class="form__label">{{ option.name }}</legend>
{%- for value in option.values -%}
{% assign variant = product.variants | where: 'title', value | first %}
{% assign variant_image = variant.image %}
<input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
aria-label="Variants"
name="{{ option.name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
{% if option.selected_value == value %}checked{% endif %}
>
{% if variant_image %}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" class="product-color-setup">
<img src="{{ variant_image.src | img_url: 'medium' }}" alt="{{ value }}" />
</label>
{% else %}
{% if option.name == "Color" %}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" class="product-color-setup" style="background-color:{{ value }};"></label>
{% else %}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" class="product-color-setup">{{ value }}</label>
{% endif %}
{% endif %}
{%- endfor -%}
</fieldset>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
{%- else -%}
<variant-selects
id="variant-selects-{{ section.id }}"
class="no-js-hidden"
data-section="{{ section.id }}"
data-url="{{ product.url }}"
{% if update_url == false %}
data-update-url="false"
{% endif %}
{{ block.shopify_attributes }}
>
{%- for option in product.options_with_values -%}
<div class="product-form__input product-form__input--dropdown">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<select
id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
{% render 'product-variant-options', product: product, option: option, block: block %}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endif -%}
{%- endunless -%}
<noscript class="product-form__noscript-wrapper-{{ section.id }}">
<div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
<label class="form__label" for="Variants-{{ section.id }}">
{{- 'products.product.product_variants' | t -}}
</label>
<div class="select">
<select
name="id"
id="Variants-{{ section.id }}"
class="select__select"
form="{{ product_form_id }}"
>
{%- for variant in product.variants -%}
<option
{% if variant == product.selected_or_first_available_variant %}
selected="selected"
{% endif %}
{% if variant.available == false %}
disabled
{% endif %}
value="{{ variant.id }}"
>
{%- liquid
echo variant.title
echo variant.price | money | strip_html | prepend: ' - '
if variant.available == false
echo 'products.product.sold_out' | t | prepend: ' - '
endif
if variant.quantity_rule.increment > 1
echo 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment | prepend: ' - '
endif
if variant.quantity_rule.min > 1
echo 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min | prepend: ' - '
endif
if variant.quantity_rule.max != null
echo 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max | prepend: ' - '
endif
# TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter
# theme-check-disable
assign cart_quantity = cart | item_count_for_variant: variant.id
# theme-check-enable
if cart_quantity > 0
echo 'products.product.quantity.in_cart_html' | t: quantity: cart_quantity | prepend: ' - '
endif
-%}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
</noscript>
