How can I display an alternate product image on hover?

Shopify Discussion
,

Topic summary

Goal: show a specific alternate product image on hover in the product grid—prefer image #7; if unavailable, fall back to image #2 (current behavior shows image #2).

What was shared: CSS hover rules and multiple Liquid snippets from the Prestige theme, mainly controlling price-on-hover (show_price_on_hover), unit price, and product labels/tags. These do not include the image rendering logic.

Helper’s guidance: The CSS can stay; the change must be in Liquid (Shopify’s templating language). The relevant code is likely in snippets > product-item.liquid (or a related snippet) that renders product images, not in the price or tag sections. The earlier snippets provided are “not right” for this change.

Current status: The Liquid block that outputs the product images on the collection/overview cards has not been shared yet, so no code modification was provided.

Next steps: Locate and share the Liquid section that renders the product card images (within product-item.liquid or a referenced snippet). From there, modify it to select image index 7 with a fallback to image 2 on hover. Discussion remains open.

Summarized with AI on January 1. AI used: gpt-5.
11

HI Im using prestige theme, on the product-item.liquid

{%- if show_price_on_hover == nil -%}
{%- assign show_price_on_hover = settings.product_show_price_on_hover -%}
{%- endif -%}

{%- if show_price_on_hover and color_swatch_list != blank -%}
{{- color_swatch_list -}}
{%- endif -%}

{%- if product.template_suffix != ‘coming-soon’ -%}

{%- if product.compare_at_price > product.price -%} {{ product.price | money_without_trailing_zeros }} {{ product.compare_at_price | money_without_trailing_zeros }} {%- elsif product.price_varies -%} {%- capture formatted_min_price -%} {{ product.price_min | money_without_trailing_zeros }} {%- endcapture -%} {%- capture formatted_max_price -%} {{ product.price_max | money_without_trailing_zeros }} {%- endcapture -%} {{ 'collection.product.from_price_html' | t: min_price: formatted_min_price, max_price: formatted_max_price }} {%- else -%} {{ product.price | money_without_trailing_zeros }} {%- endif -%}

{%- if product.selected_or_first_available_variant.unit_price_measurement -%}

{{ product.selected_or_first_available_variant.unit_price | money_without_trailing_zeros }} /

<span class=“UnitPriceMeasurement__ReferenceValue” {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value == 1 -%}style=“display: none”{% endif %}>
{{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}

{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}

{%- endif -%} {%- endif -%}

{% for t in product.tags %}
{% assign lowercase_tag = t | downcase %}

{% if lowercase_tag contains ‘new’ %}

{% if settings.img_responsible_choice %}

{% else %}
{{ settings.sale_text }}
{% endif %}

{% endif %}

{% if lowercase_tag contains ‘responsible choice’ %}

{% if settings.img_responsible_choice %}

{% else %}
{{ settings.responsible_choice }}
{% endif %}

{% endif %}

{% if lowercase_tag contains ‘pet’ %}

{% if settings.img_pet %}

{% else %}
{{ settings.pet_text }}
{% endif %}

{% endif %}
{% endfor %}

{%- if show_price_on_hover == false and color_swatch_list != blank -%}
{{- color_swatch_list -}}
{%- endif -%}

{%- endif -%}