Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Change hover image on products

Solved

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

FORTLondon
Excursionist
20 1 13

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.

Accepted Solutions (2)
FORTLondon
Excursionist
20 1 13

This is an accepted solution.

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

View solution in original post

Prezentech
Shopify Partner
391 76 106

This is an accepted solution.

Hi @FORTLondon 

I hope you got your answer now 🙂

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

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

View solution in original post

Replies 22 (22)

Zworthkey
Shopify Partner
5581 642 1583

@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.
YHMAC
New Member
6 0 0

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

YHMAC
New Member
6 0 0

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.

Prezentech
Shopify Partner
391 76 106

Hi @YHMAC ,

Please share your store url so i can check and  guide 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
YHMAC
New Member
6 0 0
Hi was able to find a local developer who helped.
DOCHERS
Tourist
4 0 0

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/

Prezentech
Shopify Partner
391 76 106

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

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
DOCHERS
Tourist
4 0 0

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

 

Thank you friend!!

Prezentech
Shopify Partner
391 76 106

We have updated in your theme and it is working as expected.

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
Mark166
Tourist
6 0 3

Hi, @Prezentech.

I am using Shopify's "Dawn" theme. I want the product image to show the 2nd image when the user mouse over it.

The file names of codes in Dawn theme are all different from the one that's mentioned in the first page. I wasn't sure if it is the right file to add the code.

I have sent you an invitation to info@prezentech.com. Is it possible for you to edit the theme for me?

 

Edit: I'm sorry. I found the solution for Dawn theme here: https://community.shopify.com/c/shopify-design/dawn-theme-how-to-show-second-image-on-hover/m-p/1408...

Prezentech
Shopify Partner
391 76 106

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
FORTLondon
Excursionist
20 1 13
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
Prezentech
Shopify Partner
391 76 106

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
FORTLondon
Excursionist
20 1 13
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
Prezentech
Shopify Partner
391 76 106

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
FORTLondon
Excursionist
20 1 13
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
Prezentech
Shopify Partner
391 76 106

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
FORTLondon
Excursionist
20 1 13
Thank you so much, this all looks greta. Will this happen automatically now
with every product we add?

Thank you.
Prezentech
Shopify Partner
391 76 106

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

 

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
FORTLondon
Excursionist
20 1 13

This is an accepted solution.

Great, thank you so much! This is all good.
Prezentech
Shopify Partner
391 76 106

This is an accepted solution.

Hi @FORTLondon 

I hope you got your answer now 🙂

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

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
Slingtown
Visitor
1 0 0

Hi there Prezentech, 
I'm having the same problem with my store. Any chance for some help on this?

https://www.slingtown.com/ is my store. Thanks