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

Store Design
1

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.

2

@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:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Assets directory, click theme.css.liquid. If your theme doesn’t have a theme.css.liquid file, then click styles.css.liquid, or another file with a .css.liquid file extension.
  4. At the very bottom of the file, paste this code hosted on GitHub.
  5. Click Save.

Step 2: Edit the code for your product images

To edit the code for your product images:

  1. In the Snippets directory, click product-grid-item.liquid.If your theme doesn’t have a product-grid-item.liquid file, then look for one of the following:

    • product-card.liquid
    • product-card-grid.liquid
    • product-loop.liquid

  2. Find the HTML img tag for your product images by searching for:



    1

    <img

    The code for the tag varies theme to theme, but always starts with <img, and ends with either > or />. It might look similar to this:

    |

    1

    |

    {{ featured.featured_image.alt | escape }}

    |
    | - | - |

  3. On a new line above the img tag, paste the following code:



    1



    On a new line below the img tag, paste the following code:



    1



    The result should look like this:

    |

    1
    2
    3

    |


    {{ featured.featured_image.alt | escape }}


    |
    | - | - |

  4. On a new line below the img tag and above the closing tag, add the code that changes what is shown on hover. The code that you add will vary depending on whether you want to show an alternate product image, custom text, or a combination of the two.

Step 3: Show an alternate product image on hover

  1. On a new line below the img tag and above the closing tag, paste the following code:

    |

    1

    |

    {{ product.images.last.alt | escape }}

    |
    | - | - |

    Your code should look like this:

    |

    1
    2
    3
    4

    |


    {{ featured.featured_image.alt | escape }}
    {{ product.images.last.alt | escape }}


    |
    | - | - |

  2. Click Save.

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!

4

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

1 Like
5

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!

6

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

7

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!

8

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

9

Hi Rosanna,

Sure, please check now, we have made the changes for you.

Thanks!

10

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

Thank you.

11

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

12

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

13

Hi @FORTLondon

I hope you got your answer now :slightly_smiling_face:

Kindly like and accept the solution so, other people got the correct answers.

Thanks!

1 Like
14

Hi, I’m working out of Minimal Theme and I can only find theme.scss.liquid in Assets. There is no css.liquid files. Will this work the same?

Thank you

15

This solution doens’t seem to apply to Minimal Theme. I have tried to implement the code but there is only scss.liquid files.

Anyone can suggest a different solution.

16

Hi @YHMAC ,

Please share your store url so i can check and guide you.

Thanks,

17

Hi was able to find a local developer who helped.

18

Hi Prezentech.

I’m using the Venture theme and I have a bunch of apps installed that may or may not be messing with the code. I’m no expert. I’ve tried your tutorial and I tried another tutorial by ecomexperts.io which were very similar and neither tutorial worked.

Could I send you a invitation to contribute on my code?

My website is https://everlastinggodkings.com/

19

Can you please create the staff account for info@prezentech.com so we can check in the theme?

1 Like
20

Prezentech I’ve just sent you a collaborator code to the email you specified.

Thank you friend!!