How do I display the second image on mouse hover?

Technical Q&A
1

Hello,

I want to know how to make each product to show the second image when the mouse is hover on each image.

What are the procedures for doing that?

Thank you in advance.

2

Hi @MotownTress ,

Thanks for reaching out to the Shopify Community with your question!

Please follow these steps to show second image on hover:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, and then click Customize.

  3. On the Homepage, click on Featured collection, go to Product card and check the S****how second image on hover box

Screenshot_9.png
Screenshot_9.png337×392 8.31 KB

  1. On the Collection page, click on Product grid, go to Product card and also check the Show second image on hover box

  2. Save and check the result on your frontend.

If you find this answer helpful, please mark it as Solution. Let me know if you have any further questions at all or if I can help in any other way.

3

@MotownTress

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!

Thanks for your good question.

Check on to the Dawn theme, it has feature to on over Show the Secondary image.

Check this https://themes.shopify.com/themes/dawn/styles/default/preview?surface_detail=carousel&surface_inter_position=1&surface_intra_position=1&surface_type=home

Thank you.

4

Hello,

thank you for your reply. Unfortunately, I have that checked, but it does not work when the mouse is hovered on the image.

Thank you

@avadaComm

5

Hi @MotownTress ,

Thanks for getting back to me.

Have you tried saving the change again? If your theme has that option but it doesn’t work correctly then you should contact your theme provider to make it work.

All the best