Show a specific image on hover in my product cards

[creativebp8]

My site uses the standard Dawn theme. Currently my product cards are set to show the second image when my cursor hovers over them. I was hoping to change it to show a different specific image (changes based on product). Currently I have my product stills in order and then two photos of a model wearing my product. I was hoping to keep this same order whilehave one of the modeling photos show up when you hover over the product listing. I believe there needs to be a custom code implemented and was hoping I could get some guidance on how to go about this. Should be a pretty simple integration just not sure where to start. I have attached a photo of an example product listing and how the order of my photos usually goes. Please not there is a different number of photos for each product.

[namphan]

Hi @creativebp8,

It will display the second image in the list of images, or another image. You can use Metafield to add customization to each product and display it.

Do you have experience with code?

[creativebp8]

Yes, I understand it will display the second image. I want it to instead
display the last image. I have some general experience in coding. Where
should I start?

[namphan]

Hi @creativebp8,

Will it always show the last image of all products, or will some products show the image in a different position?

If always show the last image, can you send me the code of card-product.liquid file, I will help you check it

[creativebp8]

It will always show the last image. How should I best send you the code?

[namphan]

Hi @creativebp8,

You can post it directly here, or send it via private message. I will check it

[levents-2025]

Hi @namphan what if some images are shown in a different position? How should it be coded?

[namphan]

Hi @levents-2025,

You want each product to display image in different positions? like product A will display image in position 2, product B will be 3.

This will need to be setup by Metafield, if you want I can add it and guide you

[levents-2025]

Yes but to be specific, I want variant A to show a different image from variant B when hovered.

[namphan]

Hi @levents-2025,

The product card will show product image, with variant image, I still don't understand it clearly, can you explain more or send me store link in private message? I will check it

[levents-2025]

[namphan]

Hi @levents-2025,

I got it, this is possible. You can create Metafield for each variant and customize it.

Please send me store link and collaborator code in private message, I will help you add it

[levents-2025]

Thank you. I have sent an email.

[Vinsinfo · Accepted solution]

@creativebp8 Please follow below steps to display last image on product cards instead of second image. Let me know whether it is helpful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Go to "card-product.liquid" file and search "if card_product.media[1] != null" and paste the below code before that line like below image.

{% assign last_image = card_product.media | last %}

4. Then search "card_product.media[1]" and paste "last_image" code in replace field like below image.

5. Then click "Replace All" button and save changes.

Now, hovering on product cards will display the product last image.

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[creativebp8]

Thank you so much!