Hover image product

Store Design
1

So I want a hover image for my products but I don’ want to use my second image. The hover image is a total different image and also not visible on the individual product page.

I already made a new metafield for this hover image but I can’t seem to get the code right in my snippet card-product.liquid

can somebody help me?

2

Hey @Charcopp14,

Could you please share your store URL and password (if applicable) so that I can take a look and provide you the solution code?

Looking forward to hearing back from you.

Best,

Daniel

3

Hey Daniel

My url is: https://www.vientodelvino.com

4

Hey Daniel

My url is: https://www.vientodelvino.com https://www.vientodelvino.com

6

This should be done by a developer you trust. Always ask for a cost estimate. :wink:

Technically speaking, this is only relevant on the desktop. Here, you have to load the image from the meta field using the :hover CSS element.

7

This is the code you want to change:

I’d start by changing it like this, just make sure the metafields namespace and key are proper in line 2:

{%- if show_secondary_image -%}
  {% assign si = product.metafields.custom.secondary_image.value | default: card_product.media[1] %}
  {%- if si != null -%}
    <img
      srcset="
        {%- if si.width >= 165 -%}{{ si | image_url: width: 165 }} 165w,{%- endif -%}
        {%- if si.width >= 360 -%}{{ si | image_url: width: 360 }} 360w,{%- endif -%}
        {%- if si.width >= 533 -%}{{ si | image_url: width: 533 }} 533w,{%- endif -%}
        {%- if si.width >= 720 -%}{{ si | image_url: width: 720 }} 720w,{%- endif -%}
        {%- if si.width >= 940 -%}{{ si | image_url: width: 940 }} 940w,{%- endif -%}
        {%- if si.width >= 1066 -%}{{ si | image_url: width: 1066 }} 1066w,{%- endif -%}
        {{ si | image_url }} {{ si.width }}w
      "
      src="{{ si | image_url: width: 533 }}"
      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
      alt=""
      class="motion-reduce"
      loading="lazy"
      width="{{ si.width }}"
      height="{{ si.height }}"
    >
  {%- endif -%}
{%- endif -%}
8

Hi @Charcopp14

Step 1 — Create your metafield

You’ve already created it — good.

Make sure it’s:

  • Namespace & key: custom.hover_image (example)
  • Type: File → Image
  • Applies to: Products

Step 2 — Add hover image code inside card-product.liquid

Dawn theme image container looks like this:

<div class="card__media">
  {{ card_product.featured_image | image_url: width: 600 | image_tag }}
</div>

We will add your hover image on top and make it show only on hover.

Replace your image block with this improved version

Find the main product image inside card-product.liquid and replace that section with:

<div class="card__media relative">

  {%- comment -%} Main product image {%- endcomment -%}
  <img
    src="{{ card_product.featured_image | image_url: width: 600 }}"
    alt="{{ card_product.title | escape }}"
    class="product-image-main"
  >

  {%- comment -%} Custom hover image via metafield {%- endcomment -%}
  {% if card_product.metafields.custom.hover_image %}
    <img
      src="{{ card_product.metafields.custom.hover_image | image_url: width: 600 }}"
      alt="{{ card_product.title | escape }}"
      class="product-image-hover"
    >
  {% endif %}

</div>

Step 3 — Add this CSS (critical)

Add this to base.css:

.product-image-main,
.product-image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .3s ease;
}

.product-image-hover {
  opacity: 0;
  pointer-events: none;
}

.card__media:hover .product-image-hover {
  opacity: 1;
}

.card__media:hover .product-image-main {
  opacity: 0;
}

Best regards,
Devcoder :laptop:

10

You’re on the right track using a metafield — that’s the best way to handle a hover image that’s different from the product gallery and doesn’t appear on the product page.

What I normally do is create a product metafield with the File (image) type and only reference it inside the product card. For example, something like custom.hover_image.

In snippets/card-product.liquid, you can pull that metafield and output it next to the featured image:

{% assign hover_image = product.metafields.custom.hover_image.value %}

<div class="card__media-wrapper">
  {{ product.featured_media | image_url: width: 800 | image_tag }}

  {% if hover_image %}
    {{ hover_image | image_url: width: 800 | image_tag: class: 'hover-image' }}
  {% endif %}
</div>

Then add a bit of CSS so it only appears on hover:

.card__media-wrapper {
  position: relative;
}

.hover-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.card:hover .hover-image {
  opacity: 1;
}

This keeps the hover image completely separate from the product media, and it won’t show on the product page unless you explicitly add it there.

If this still doesn’t behave as expected, sharing more detail about the theme and how the product card is structured can help narrow down what needs adjusting.