see alternate product image on hover.

sebastiaanjopp
Shopify Partner
28 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)

Developer-G
Shopify Partner
3079 604 859

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
sebastiaanjopp
Shopify Partner
28 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
28 0 7

Can you help me? 

Developer-G
Shopify Partner
3079 604 859

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.

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
sebastiaanjopp
Shopify Partner
28 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
28 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 -%}

Developer-G
Shopify Partner
3079 604 859

okay but this one is not right.

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
sebastiaanjopp
Shopify Partner
28 0 7

on what liquid page i can find the code? 

Developer-G
Shopify Partner
3079 604 859

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
sebastiaanjopp
Shopify Partner
28 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>