How to Show Variant-Specific Images in Gold & Silver Collections (Dawn Theme)

Shopify Discussion

Topic summary

A user running a jewelry store on Shopify’s Dawn theme wants to display variant-specific images (gold vs. silver) in separate collections, rather than the default main product image. They’re concerned about preserving existing features like the show-second-image-on-hover functionality.

Proposed Solutions:

  • Manually edit each product to set the desired variant image as the main image for each collection
  • Modify the theme code that controls collection page image display to pull variant-specific images instead of the main image (claimed to preserve other functionality)

Current Status:

  • One community member requested store access for detailed review
  • Another user asked for clarification on which specific code changes are needed
  • No concrete code examples or theme recommendations have been provided yet
  • The discussion remains open with the technical implementation details unresolved
Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Question:

I’m using the Dawn theme for my jewelry store and want to create separate collections for gold and silver jewelry. However, I need the product images in each collection to match the correct variant (gold for the gold collection, silver for the silver collection).

By default, Shopify shows the main product image in collections, but I want it to display the variant-specific image instead. how do i achieve this without breaking connected features like show-second-image-on-hover and any other functionality that might be connected to this?

Also, are there any themes that natively support this feature?

1 Like
2

Hello @S02K
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

3

Hello @S02K ,

There are 2 ways:

  1. Edit each product and change nab image with desired one.

  2. Edit the code, find the piece of code which displays the main image on the collection page and replace it with the desired one. In this way no other functionality will break.

Regards
Guleria

1 Like
4

What code was changed exactly as part of this solution? Thanks!