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, Broadcast is not free theme. So could you please share your url store? We will help to check it.

Hi, May I suggest to update code these steps: Go to Store Online-> theme → edit code Assets/theme–async.css Add code below to end of file main .product--root[data-hover-image=loaded]:hover .product--image[data-item] { opacity: 0; } main .product--root[data-hover-image=loaded]:hover .product-…

Hi, May I suggest to update code these steps: Go to Store Online-> theme → edit code Assets/theme.css add code below to end of file body .product-card__figure:has(.product-card__image--secondary):hover>.product-card__media .product-card__image--secondary { opacity: 1; display: block; …

Sure, the url is: www.shootthemoongifts.com . Looking forward to hearing from you. Thank you!

Hi, May I suggest to update code these steps: Go to Store Online-> theme → edit code Assets/theme.css Add code below to end of file body main .double__image .product-item__bg__under, body main .product-item--overlay-text .product-item__bg__under { opacity: 0; } body main .double__image:hove…

Hi @EBOOST , Thank you for your kindly help. I tried this but it’s not working. any suggestion?

Hi @EBOOST , I had a check but can’t fin the file ‘theme–async.css’. See attached screenshot. [20231106125200.jpg]

Hi, Sorry. I suggested this code for Beyond theme. So may I suggest to update code these steps for your theme: Go to Store Online-> theme → edit code Assets/theme.css Add code below to end of file body main .double__image .product-item__bg__under, body main .product-item--overlay-text .product-…

Hi @EBOOST , I tried this but it’s not working on the mobile :disappointed_face: Any other change needs to be done? Thank you!

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

Store Design

cashmerecasper November 6, 2023, 11:52am 54

Thank you! It works perfectly! Your help is highly appreciated

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	1646	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	1863	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