How can I display an alternate product image on hover?

How can I display an alternate product image on hover?

sebastiaanjopp
Shopify Partner
31 0 7

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. 

Replies 10 (10)

Guleria
Shopify Partner
3992 795 1134

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

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
sebastiaanjopp
Shopify Partner
31 0 7

.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);

sebastiaanjopp
Shopify Partner
31 0 7

Can you help me? 

Guleria
Shopify Partner
3992 795 1134

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.

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
sebastiaanjopp
Shopify Partner
31 0 7

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' -%}
<div class="ProductItem__PriceList {% if show_price_on_hover %}ProductItem__PriceList--showOnHover{% endif %} Heading">
{%- if product.compare_at_price > product.price -%}
<span class="ProductItem__Price Price Price--highlight Text--subdued">{{ product.price | money_without_trailing_zeros }}
</span>
<span class="ProductItem__Price Price Price--compareAt Text--subdued">{{ product.compare_at_price | money_without_trailing_zeros }}
</span>
{%- 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 -%}
<span class="ProductItem__Price Price Text--subdued">{{ 'collection.product.from_price_html' | t: min_price: formatted_min_price, max_price: formatted_max_price }}
</span>
{%- else -%}
<span class="ProductItem__Price Price Text--subdued">{{ product.price | money_without_trailing_zeros }}
</span>
{%- endif -%}
</div>

sebastiaanjopp
Shopify Partner
31 0 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 %}
</div>
{%- endif -%}
{%- endcapture -%}

Guleria
Shopify Partner
3992 795 1134

okay but this one is not right.

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
sebastiaanjopp
Shopify Partner
31 0 7

on what liquid page i can find the code? 

Guleria
Shopify Partner
3992 795 1134

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

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
sebastiaanjopp
Shopify Partner
31 0 7

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' -%}
<div class="ProductItem__PriceList {% if show_price_on_hover %}ProductItem__PriceList--showOnHover{% endif %} Heading">
{%- if product.compare_at_price > product.price -%}
<span class="ProductItem__Price Price Price--highlight Text--subdued">{{ product.price | money_without_trailing_zeros }}
</span>
<span class="ProductItem__Price Price Price--compareAt Text--subdued">{{ product.compare_at_price | money_without_trailing_zeros }}
</span>
{%- 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 -%}
<span class="ProductItem__Price Price Text--subdued">{{ 'collection.product.from_price_html' | t: min_price: formatted_min_price, max_price: formatted_max_price }}
</span>
{%- else -%}
<span class="ProductItem__Price Price Text--subdued">{{ product.price | money_without_trailing_zeros }}
</span>
{%- endif -%}
</div>

{%- if product.selected_or_first_available_variant.unit_price_measurement -%}
<div class="ProductItem__UnitPriceMeasurement">
<div class="UnitPriceMeasurement Heading Text--subdued">
<span class="UnitPriceMeasurement__Price">{{ product.selected_or_first_available_variant.unit_price | money_without_trailing_zeros }}
</span>
<span class="UnitPriceMeasurement__Separator">/
</span>

<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 -}}
</span>

<span class="UnitPriceMeasurement__ReferenceUnit">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
</span>
</div>
</div>
{%- endif -%}
{%- endif -%}

 

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

{% if lowercase_tag contains 'new' %}
<span style="background:{{ settings.bgcolor_sale_text }} !important" class="spf-product__label new_label">
{% if settings.img_responsible_choice %}
<img src="{{ settings.img_new | img_url: '46x' }}" />
{% else %}
{{ settings.sale_text }}
{% endif %}
</span>
{% endif %}

{% if lowercase_tag contains 'responsible choice' %}
<span style="background:{{ settings.bgcolor_responsible_choice }} !important; color: #fff" class="spf-product__label repon_choice_label">
{% if settings.img_responsible_choice %}
<img src="{{ settings.img_responsible_choice | img_url: '46x' }}" />
{% else %}
{{ settings.responsible_choice }}
{% endif %}
</span>
{% endif %}

{% if lowercase_tag contains 'pet' %}
<span style="background:{{ settings.bgcolor_pet_text }} !important" class="spf-product__label pet_label">
{% if settings.img_pet %}
<img src="{{ settings.img_pet | img_url: '46x' }}" />
{% else %}
{{ settings.pet_text }}
{% endif %}
</span>
{% endif %}
{% endfor %}

 

{%- if show_price_on_hover == false and color_swatch_list != blank -%}
{{- color_swatch_list -}}
{%- endif -%}
</div>
{%- endif -%}
</div>