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>…

Hello, I need again your help. When the client click on the picture, he can see the second picture. However, if he wants to buy it, it does work if he clicks on the picture again. He needs to click the price or description. He can we fix that please. Once again, this is on the mobile only. On …

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]

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

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.

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

Store Design

EBOOST December 27, 2023, 8:57am 85

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

Topic		Replies	Views
Show second image on hover ( DAWN Theme ) Store Design	16	223	June 23, 2023
Reveal second image on hover - Debut theme Store Design	134	1648	November 9, 2023
Product card second image on hover/touch for mobile Store Design design	2	58	January 18, 2025
Collection - Add a hover effect to product images on your collection pages Store Design	87	1868	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