Hi! I want the product cards to show their second image on hover, I have checked the option and it works on desktop, but it doesn’t work on mobile… I need it to work on mobile too. Any help please? Here’s the store https://agori-jewellery.com/ I’m using Dawn 7.0.1

Hi @agori May I suggest to update code these steps: Go to Store Online-> theme → edit code Assets/component-card.css Add code below to bottom of file .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) { opacity: 0; } .card-wrapper:hover .media.media--hover-effect>…

Hi again, Ok, that worked, but there are just a couple of minor issues. First, when you let go, it stays on the second image instead of switching back to the first like on desktop. The second issue is, if you hold your finger on the product for more than a second it highlights the image, instead of…

Hello I’m using impact theme version 4.3.4 and I want to implement this mobile hover image transition I’ve tried most of solutions above but they did not work can you provide any tips for me https://www.boujisphere.com/ this is my website link

Hi, May I suggest to update code these steps: Go to Store Online-> theme → edit code [EBOOST_0-1703652894866.png] Assets/theme.css Add code below to end of file body .product-card--show-secondary-media .product-card__figure:hover .product-card__image--primary { opacity: 0; } body .produ…

Hello, Thank you for your message. Please note I do not have " Assets/theme.css" in my coding. Can you please advise. Thank you, Hani Hachache

Hi Hani, With your case. May I suggest to update code these steps: Go to Store Online-> theme → edit code Layout/theme.liquid Add code below to end of file and before tag [EBOOST_0-1703667370543.png]

Hi, Did you add code above? I checked your store ( https://www.efcollection.com/ ). However, I don’t see the code.

Hello, Yes, I added it. My website is www.griffjewelry.com Thank you

Hi, With this store. Maybe I suggest code below: Note: When you use this code after you need touch twice times to redirect to product page. the first touch will show the second image. The second touch will go to product page.

Hello again. Thank you for your support. It is not working properly: I touch one time the first picture, it shows the second picture and redirect me directly to the product page. All this in one touch instead of 2 touches. Please advise. Thank you, Hani

How can I enable second image hover on mobile product cards?

Store Design

hanihachache December 27, 2023, 9:39am 86

Hello,

Thank you for your support.

Unfortunately it did not work. I still need to press on the description or
the price to enter the page to buy it.

Can you please support.

Thank you,

Hani Hachache

Topic		Replies	Views
Show second image on hover ( DAWN Theme ) Store Design	16	220	June 23, 2023
Reveal second image on hover - Debut theme Store Design	134	1624	November 9, 2023
Product card second image on hover/touch for mobile Store Design design	2	56	January 18, 2025
Collection - Add a hover effect to product images on your collection pages Store Design	87	1831	February 27, 2024
Image on hover on product card not be second image Store Design design , customizations , css , shopify-themes , troubleshooting	22	246	July 29, 2025

How can I enable second image hover on mobile product cards?

Related topics