Hello Shopify community! I am using the MINIMAL shopify theme and would like to add some CSS to allow the product image to change to the second allocated image when a user hovers over it. My website is www.fortldn.com Thanks so much for your help.

Great, thank you so much! This is all good.

@FORTLondon Step 1: Add CSS to your stylesheet To add a hover effect, you will need to add some CSS code to your theme’s stylesheet: From your Shopify admin, go to Online Store > Themes. Find the theme you want to edit, and then click Actions > Edit code. In the Assets directory, click theme.css…

Hello, Thank you so much for this! It looks great, however I would like the second image listed to be the image that shows when hovering over the first product image. Is that ok? Thanks so much, Rosanna

Hi @FORTLondon Sure, we have made the changes, please check and share your comments. https://fortldn.com/collections/glassware Once it will work then, do not forget to like and accept the solution :slightly_smiling_face: Thanks!

Hello, Sorry maybe you did not understand - I would like the first image to remain as it was, but upon hovering, the second image is the one which shows. I think you had it as the last image which was the one which showed… Thanks, Rosanna

Hi @FORTLondon Sorry I misunderstood. I have fixed the it as per requirement. https://fortldn.com/collections/glassware Please check and let me know your comments. Thanks!

This is great, thank you so much. Is there a way to stop it from saying ‘no image’ when there is no second image? Maybe the image stays the same when you hover? Thanks, Rosanna

Hi Rosanna, Sure, please check now, we have made the changes for you. Thanks!

Thank you so much, this all looks greta. Will this happen automatically now with every product we add? Thank you.

Yes @FORTLondon , it will work with the new products as well :slightly_smiling_face:

How can I alter hover image on products using CSS in Minimal theme?

Store Design

Prezentech March 24, 2021, 1:24pm 3

Hi @FORTLondon

Please check the below link:
https://fortldn.com/collections/glassware

I have implemented the hover changes for you that you want.

Thanks!

Topic		Replies	Views
How can I change to the second image on hover in Minimal theme? Store Design	1	30	December 14, 2021
How can I change product images with CSS on hover? Store Design	4	73	September 29, 2022
How to make product image change when hovered over? (Debut Theme) Store Design	0	28	February 8, 2022
Add A Hover Effect To Product Images On my SHOPIFY Collection Pages Shopify Discussion apps	3	466	June 4, 2026
Change Product Image To Second Image When Hovering Store Design customizations	7	78	December 21, 2022

How can I alter hover image on products using CSS in Minimal theme?

Related topics