Mobile version Hoover over in collection not working

Store Design
,

Topic summary

A Shopify store owner reports that hover effects on product images work correctly on desktop but fail to function properly on mobile devices. On mobile, the image change requires either a long press or tapping a specific area, creating a poor user experience.

Proposed Solution:
A community member suggested adding JavaScript code to handle touch events specifically for mobile devices:

  • Use touchstart event listeners on image elements
  • Add the code to the theme’s JS file

Current Status:
The issue remains unresolved. After implementing the suggested JavaScript code at the bottom of the theme.js file, the original poster confirmed that nothing changed and the mobile hover functionality still doesn’t work as expected.

The discussion appears to need further troubleshooting, possibly requiring a different approach or more specific code tailored to the theme’s structure.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Pc version Hoover photos are working fine. The mobile version does not seem to work at first touch. When you hold longer or click on the other side a bit, then, it changes the photo. But it’s not very intuitive for the customer.

https://e8614c-2.myshopify.com/collections/decking-and-pergola-kits-1

1 Like
2

@GediminasS oh sorry for that issue can you try this script code its work on mobile or touch device only add this your js file

const images = document.querySelectorAll('.your-image-selector');
images.forEach(image => {
    image.addEventListener('touchstart', function() {
        // Code to change the image on touch
    });
});
3

@KetanKumar where do i need to paste it?

1 Like
4

@GediminasS your theme.js file bottom the code

5

Hi,

Unfortunately same, nothing changed.