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.
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.
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.
