Horizon Theme - Stop Hover Product Image Changing

Shopify Discussion

Topic summary

Issue: The Horizon theme automatically switches to a product’s second image on hover, which the user wants to disable while keeping manual navigation arrows functional.

Initial Solution Suggested:
Add CSS code to hide the second slide:

.product-grid__item slideshow-slide[style*="--slide-2"] {
  display: none !important;
}

This should be added via Sales Channels > Online Store > Themes > Customize > Theme Settings > Custom CSS.

Working Solution (Confirmed by Original Poster):
Modify assets/product-card.js (lines 252-282) by replacing the previewImage() and resetImage() functions with empty implementations that include comments noting they’re “intentionally disabled.”

This JavaScript approach prevents the hover behavior at the functional level rather than just hiding elements with CSS. The discussion appears resolved with a code-based workaround that maintains arrow navigation while removing automatic hover transitions.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

Currently on the Horizon theme if you hover over a product image it changes the image to the second image for the product. I want to lock it in on the first image. How do I accomplish this? I still want to be able to use the left and right arrows on the product image to cycle through the images, I just don’t want it to automatically change to the second image on hover.

Thanks,

Parker

2 Likes
2

yes please!

3

Yeah I might be new here but I wasn’t born yesterday lol

1 Like
4

Hi @prhinson ,

You can do this by adding the following code to Custom CSS in Sales Channels > Online Store > Themes > Customize > Theme Settings (Cog Icon) > Custom CSS

.product-grid__item slideshow-slide[style*="--slide-2"] {
  display: none !important;
}

Hope that helps!

5

Here’s the solution I found in case anyone else finds this thread. Using the Horizon theme, find assets/product-card.js. From line 252-282 I saw this:

/**
   * Previews the next image.
   *  {PointerEvent} event - The pointer event.
   */
  previewImage(event) {
    const { slideshow } = this.refs;

    if (!slideshow || event.pointerType !== 'mouse') return;

    this.resetVariant.cancel();

    if (this.#previousSlideIndex != null && this.#previousSlideIndex > 0) {
      slideshow.select(this.#previousSlideIndex, undefined, { animate: false });
    } else {
      slideshow.next(undefined, { animate: false });
      setTimeout(() => this.#preloadNextPreviewImage());
    }
  }

  /**
   * Resets the image to the variant image.
   */
  resetImage() {
    const { slideshow } = this.refs;
    if (!this.variantPicker) {
      if (!slideshow) return;
      slideshow.previous(undefined, { animate: false });
    } else {
      this.#resetVariant();
    }
  }

So I replaced the above code with this new code below:

/**
   * Previews the next image.
   *  {PointerEvent} event - The pointer event.
   */
 previewImage(event) {
  // Disabled intentionally to prevent hover image preview
}

  /**
   * Resets the image to the variant image.
   */
 resetImage() {
  // Intentionally disabled to prevent image reset on hover out
}