How to only show second image when hover on image

Store Design
, , ,
1

(I have Dawn theme)

Shopify offers a standard option to show the second image of your product on the collections page when you hover over the entire product card.

For me this creates a problem because I have also manually configured a visible swatch option on the collections page on the product card.

image
image1134×778 51.2 KB

The problem is that I would love to combine the two features but they clash. If you hover over the product card, the second image shows, but it should also be able to show the image that goes with the color of the swatch selected. If second image hover is allowed, it wont show the image that goes with the color until the cursor exits the product card, then it will show.

Is there a way to not have the hover feature on the entire block of the product card? But maybe only on the image or on the image+title?

You can test the problem on my store on www.peonypets.be (password: oihane)

Thanks!

2

Hey @oihanevr,
Could you please share your store URL and password [if applicable] so that I can take a look and provide you solution code.

Looking forward to hearing back from you.

Thanks

3

Here is the specific page: Peony Pets
password; oihane

4

Thanks for sharing your store url.
I take a look to the collection page and see the same issue that you explained.
In order to do the requested changes requires to do the custom code in your theme file.
Could you please share the 4 digits collab code along with the store url in the p/m so that I can take a look and make the requested changes.

Thanks

5

Hi @oihanevr ,
If you could kindly provide me with collaborator access, I will assist you in customizing the second product image hover for items that have swatch options.

6

How did you add the swatch options under the product card?
Did you custom code it?

7

Hi @oihanevr,

This is possible, you need to go to component-card.css file. Then change hover class from card-wrapper to card__inner.

Then add CSS code to make card__inner hoverable:

.card__inner {
    z-index: 2;
}

Also, you should check that when clicking the swatch to change the first image, the second image displayed on hover should also be changed accordingly.

If I helped you, then a Like would be truly appreciated.