Key takeaways
- Many modern Shopify themes support hover image natively - check Theme Editor > Collection settings.
- The hover image is always the second image in the product’s media section.
- Themes like Dawn, Sense, and Craft include this feature out of the box.
- If your theme doesn’t support it, you’ll need code changes or Fudge.
Showing a second product image on hover - typically a lifestyle shot or a different angle - is a small UX change that noticeably improves collection pages. Customers get more information before clicking, which improves the quality of traffic to individual product pages.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also built Fudge - an AI storefront editor with a 5.0 rating on the Shopify App Store.
Check if your theme supports hover images natively
Before writing any code, check whether your theme already has this feature hidden in the settings.
Step 1. Go to Online Store > Themes > Customize.
Step 2. Navigate to a Collection page.
Step 3. In the left sidebar, click the Collection section (or “Product grid” depending on your theme).
Step 4. Look for a setting called “Show second image on hover”, “Image on hover”, or similar. It may be under a “Product card” subsection.
Step 5. Enable it and save.
If this option exists, you’re done. The theme will automatically show the second image from each product’s media gallery when a customer hovers over the card.
Related: Reorder Product Images in Shopify.
Related: Add Product Badges in Shopify.
Related: Customize a Collection Page in Shopify.
Which Shopify themes support hover images natively?
Several of Shopify’s free and popular themes include this feature:
- Dawn - yes, under Collection > Product card settings
- Sense - yes, same location
- Craft - yes
- Crave - yes
- Refresh - yes
- Impulse (paid) - yes
- Prestige (paid) - yes
Older or more basic themes - and some third-party themes - may not include this option. If you don’t see it in the Theme Editor, your theme doesn’t support it natively.
How to set up the hover image correctly
The hover image is always the second image in your product’s media section. The first image is the featured/default image; the second becomes the hover state.
For this to work well:
- Make sure every product has at least two images uploaded
- Keep the second image consistent in style - most stores use a lifestyle shot, a back view, or a flat lay
- Match the aspect ratio of both images so the card doesn’t shift size on hover
If some products only have one image, the hover effect simply won’t trigger for those products - it falls back gracefully.
Related: Compress Images in Shopify.
What if your theme doesn’t support hover images?
If the Theme Editor setting doesn’t exist in your theme, you have two options:
Option 1 - Switch to a theme that supports it. If you’re using an older theme, migrating to Dawn (free) or another modern theme may be the cleanest path - you get hover images plus a range of other improvements.
Option 2 - Add it via code. The implementation requires CSS transitions and a small Liquid change to render the second image inside the product card. It’s achievable but requires editing theme files directly.
You can describe what you want to Fudge: “On collection pages, show the second product image when someone hovers over a product card. Fade between the two images.” Fudge generates the code and shows you a draft before anything changes on your live store.
Mobile behaviour
Hover effects don’t trigger on touchscreens - there’s no hover state on mobile. This is expected and fine. The hover image simply won’t show on mobile, and the featured image is used instead.
Some themes add a swipe gesture on mobile product cards as a companion feature. That requires additional code beyond the standard hover image toggle.
Beyond hover images
If you want more control over how product cards look - animated transitions, quick-add overlays, custom badge placement, or different image layouts per collection - those go beyond the Theme Editor’s options. Fudge can build any of these directly into your theme from a plain-English description.
FAQ
Not as a true hover, no - mobile devices don't have a hover state. What's possible: tap-and-hold to swap, swipe to advance, or auto-rotation. The standard Theme Editor toggle only affects desktop. For any of these, describe what you want to Fudge ("auto-rotate between the first two product images on mobile cards every 3 seconds") and it edits the product-card snippet directly.
In native theme settings, no - it's always the second image in the product's media gallery. To control which image shows, reorder the product's media so your preferred hover image sits in position 2. For more flexibility (e.g., picking by metafield, or using a tagged image), you'll need a code change.
Almost always an aspect ratio mismatch. The hover image needs the same ratio as the primary image, otherwise the card resizes when the image swaps. Either re-export the second image at the same dimensions, or set both images to a fixed aspect ratio in CSS using aspect-ratio and object-fit: cover.
Yes. Most modern themes already use a CSS opacity transition on the image swap. To customise it, find the product card CSS in your theme (usually card-product.css or similar) and adjust the transition property on the hover image - for example, transition: opacity 0.3s ease; for a slow fade.
Slightly - each product card loads two images instead of one. Mitigate it with lazy loading (modern themes do this by default) and properly sized images. The performance impact is usually negligible for collections under 50 products. For very long collection grids, consider lazy-loading the second image only when the card enters the viewport.
