2nd image on hover for variants displayed as products on collection page {Dawn 7.0.1}

Technical Q&A

Topic summary

Goal: Show a second image on hover for variant cards when each product variant is displayed as its own card on collection pages (Shopify Dawn 7.0.1).

Current setup: A shared tutorial was used to render each color variant as a separate product card. This works for displaying variants individually.

Issue: Hover behavior only zooms the first image or, when enabling Dawn’s “Show second image on hover,” shows the second product-level image—not the second image specific to that variant.

Key constraint: Shopify allows only one assigned image per variant. The custom code uses the variant’s assigned image for each card, so there is no second variant image available for the hover state. Consequently, the theme’s built-in hover feature cannot source a second variant-specific image.

Update: The toggle for “Show second image on hover” was enabled; it displays a second product image, which is not satisfactory because the store uses a pattern of 7 images per color variant and wants the 2nd image of that variant.

Status: No solution provided yet; suggestions requested. Attachments/screenshots illustrate the limitation and theme setting behavior.

Summarized with AI on February 2. AI used: gpt-5.
1

Hi Everyone,

I used this tutorial to display all my variants as separate products on collection page and it worked wonders, everyone else seems to be charging for this: https://alanryan.dev/tips/color-variants-collection-page/

However, these variants when hovered upon don’t show the 2nd image and just zoom in the first one. Any help?

1 Like
2

Hello @sdsahil

As I see you are using the code to display all the color variants of a single product on your collection page.

Because this code shows an image of a product variant for each card and we can only attach one image per variant, there will be no second image. https://prnt.sc/214Ly-qzwAq9

This code doesn’t seem to get the 2nd image for the card. https://prnt.sc/MDg_2d7Pf5CD

So the “Show second image on hover” option doesn’t work. https://prnt.sc/mxuF9BycpcGC

I hope my information can be useful.
Best regards,
GemPages Support Team

1 Like
3

Thanks so much for the link to this tutorial - just what I have been searching for:)

4

Hi,

Thanks for your reply, I checked the “show 2nd img on hover” box under customise theme and now the variant card shows 2nd product img but this still isn’t satisfactory because ideally it should show 2nd variant img.

Any suggestions?

There’s a pattern to images for every product that I follow: 7 images per variant (color)