How We Fixed the Wrong Image After Hover in Shopify Horizon

We changed a Shopify Horizon product card so moving the pointer away selects the image the card is meant to rest on: its initial product photo, or the selected variant's photo. Before, leaving the card could simply move the carousel back one slide and leave the wrong photo visible. Our local fix keeps the carousel and hover preview available while giving the card a defined image to return to.

We found a repeatable example after navigating the carousel, and also saw an intermittent wrong image when hovering over a card soon after a page reload. The three screenshots below document the repeatable carousel example, not a measured loading test.

What the shopper saw

With the product-card carousel enabled, the card began on a close-up front photo. We navigated to a back-view photo, then moved the pointer outside the card. Instead of returning to the original close-up, it showed a different, full-length front photo. That made otherwise identical product cards look inconsistent after interaction.

These are three states of the same product card, in the order the shopper encountered them:

Initial state: Before any interaction, the card shows a close-up front view of the polo.

Interaction: We use the carousel to reach the back-view photo while the pointer is still over the card.

Wrong result: After the pointer leaves, a full-length front photo remains instead of the original close-up.

We also saw an unexpected image after hovering over a card during its first page load. A slower load gives someone more time to interact before images have settled, but we did not isolate network speed as a separate root cause. The screenshots above establish the carousel behavior, not the timing of that intermittent case.

Where we traced and changed the code

We followed the behavior in file order in our Horizon 4.1.5 theme copy:

1. Find the event entry. In snippets/card-gallery.liquid, lines 75–77, pointerenter calls previewImage and pointerleave calls resetImage when hover preview is enabled. We did not change this binding.
2. Find the wrong reset. In the pre-fix local assets/product-card.js, line 508, the path without a variant picker called slideshow.previous. The previous method in assets/slideshow.js, lines 334–336, selects the previous index. It cannot guarantee a return to the initial image.
3. Change the exit handler. In the current assets/product-card.js, lines 501–505, resetImage sends mouse pointer exits through the existing #resetVariant path instead of moving one slide backward.
4. Set a reliable fallback. In that file, #resetVariant at lines 510–534 selects the chosen variant image or the initial slide. If neither is valid, line 533 selects the first visible slide rather than calling previous again.

The key change is from this pre-fix line:

slideshow.previous(undefined, { animate: false });

To this current exit handler:

resetImage(event) {
  if (event.pointerType !== 'mouse') return;

  this.#resetVariant();
}

“Previous” means one step back from wherever the carousel happens to be. From image three, that lands on image two. Selecting a defined target restores the image this storefront expects after pointer exit. These line numbers identify our inspected theme copy and may move in a later Horizon release.

That choice matters. Turning off Show second image on hover may avoid the interaction, but it also removes the hover preview. Our change keeps both hover preview and carousel navigation available while making the resting image predictable. A store that wants a shopper's manual carousel selection to persist after pointer exit would need a different rule.

The intended experience is simple: shoppers can still browse a product's photos, but when they move away from the card, it returns to the starting photo or the image of their selected variant. The carousel and hover preview remain available.

Related: show multiple images per color without an app.