Display secondary image on hover/touch on mobile (Prestige theme)

Shopify Discussion
1

Hello,

I’d like to know if you guys have any suggestions on how to display the secondary image on mobile when the user is hovering/touching the entire product card.

I’m using the Prestige theme. Store url here.

Prestige has a native feature for that but only works for desktop. Looking for a solution for mobile devices.

Thanks!

2

Hello @galan ,

Disable/remove the href/link of the image and hover effect will works on mobile too.

or another alternate delay the click of the image so first it show secondary image and then redirect to the destination URL.

If problem solved don’t forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services

You can find the email in the signature below.

Thanks

3

Hi @galan

Let me explain the situation for you

On desktop, you can use two events: click and hover (when the mouse moves over an image without clicking). When you hover over the image, it shows a secondary image. If you click the image, it redirects to the linked page, like a product, collection, or another page.

However, on mobile, you only have one event: touch (or tap). Mobile devices don’t support hover like desktop does, so you can’t show the secondary image when tapping without issues.

If tapping shows the secondary image, it won’t be able to redirect to the linked page at the same time.

I hope this is clear for you :heart:

Best,

Daisy