All things Shopify and commerce
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.
Please share the existing ( liquid) code which show the 2nd image on hover
.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);
Can you help me?
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.
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>
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 -%}
okay but this one is not right.
on what liquid page i can find the code?
depends on the theme
btw try to check snippets > product-item.liquid
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>
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025