How can I display an alternate product image on hover?

Shopify Discussion
,
1

Hi,

Please help me i want that on our product overview page that we see alternate product image on hover.

Now its selected image 2 but i want to change that to image number 7 and if not availiable that it show the second image.

Please can you help

Thank you.

2

Please share the existing ( liquid) code which show the 2nd image on hover

3

.supports-hover .Link–primary:hover,
.Link–primary.is-active {
color: var(–text-color);

Or

@media (-moz-touch-enabled: 0), (hover: hover) {
.Link–underline:hover::before {
transform: scale(0, 1);

Thank you
}

.supports-hover .Link–secondary:hover,
.Link–secondary.is-active {
color: var(–text-color-light);

4

Can you help me?

5

Please share the liquid code.

Your css code will remain the same.
Just share the liquid code and I’ll try to do the modification in it a/to your need.

6

Hi in this Liquid i only see the hover inside the code. Other liquid i cant find hover.

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

i also see hover on the main-product.liquid.

{% render ‘product-item’, product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_vendor: false, show_price_on_hover: false %}

{%- endif -%} {%- endcapture -%}
8

okay but this one is not right.

9

on what liquid page i can find the code?

10

depends on the theme
btw try to check snippets > product-item.liquid

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