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, 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.

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

Heelo Again E boost thanks for your assistance but unfortunately the code you provided me earlier didn’t work as intended infact it just disaple the product image from being clicked but it didn’t give me the hover affect I wanted …

Hello again Eboost I made some adjustments to the code and it worek but not exactly as intended You can check my website to see how it works www.boujisphere.com first I want the the transitions between images to be more smooth and second I do not want the second image to appear when I click a single…

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

Store Design

hanihachache December 27, 2023, 2:48pm 88

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

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	1652	November 9, 2023
Product card second image on hover/touch for mobile Store Design design	2	59	January 18, 2025
Collection - Add a hover effect to product images on your collection pages Store Design	87	1879	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