Change hover image on products

Solved
FORTLondon
Excursionist
20 1 9

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.

0 Likes
Zworthkey
Shopify Partner
548 38 87

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

     

    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:

     

     

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

     

     

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

     

    The result should look like this:

     

  4. On a new line below the img tag and above the closing </div> 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 </div> tag, paste the following code:

     

    Your code should look like this:

     

  2. Click Save.
Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
If helpful then please Like and Accept the Solution.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/
0 Likes
Prezentech
Shopify Partner
249 50 66

Hi @FORTLondon 

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

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

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
0 Likes
FORTLondon
Excursionist
20 1 9
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
0 Likes
Prezentech
Shopify Partner
249 50 66

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

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
0 Likes
FORTLondon
Excursionist
20 1 9
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
0 Likes
Prezentech
Shopify Partner
249 50 66

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!

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
0 Likes
FORTLondon
Excursionist
20 1 9
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
0 Likes
Prezentech
Shopify Partner
249 50 66

Hi Rosanna,

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

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
0 Likes
FORTLondon
Excursionist
20 1 9
Thank you so much, this all looks greta. Will this happen automatically now
with every product we add?

Thank you.
0 Likes