Shopify themes, liquid, logos, and UX
Hi i need some help around the IOS double tap problem for hover effects. This link describes my problem pretty well: https://stackoverflow.com/questions/55732058/how-to-fix-a-double-tap-hover-issue-on-on-mobile-ios
On mobile devices hover event is missing, that's why the first tap is being considered as hover, then the second one as click. I need that fixed to be one tap only is it possible?
Here's another link that describes my problem pretty well: https://wordpress.org/support/topic/double-click-on-mobile-device-issue/
Solved! Go to the solution
This is an accepted solution.
Hello there
Yes, it is possible to disable the hover effect on mobile devices to ensure that the first tap is recognized as a click. Here are the steps you can follow:
@media (hover: none) {
/* Add CSS rules to disable hover effect on touch devices */
}
the "@media (hover: none)" rule targets devices that do not support hover, such as smartphones and tablets.
Within the "@media (hover: none)" rule, add the necessary CSS or JavaScript code to disable the hover effect. This may involve changing the CSS selectors or modifying the JavaScript event handlers to use "click" instead of "mouseover" or "mouseenter".
Save the file and preview your store on a mobile device to ensure that the hover effect is disabled and the first tap is recognized as a click.
If this fixed your issue, likes and accepting as a solution are highly appreciated
| Build an online presence with our custom-built Shopify Theme: EcomifyTheme
| Check out our reviews: Trustpilot Reviews
| We are Shopify Partners: EcomGraduates Shopify Partner
This is an accepted solution.
Hello there
Yes, it is possible to disable the hover effect on mobile devices to ensure that the first tap is recognized as a click. Here are the steps you can follow:
@media (hover: none) {
/* Add CSS rules to disable hover effect on touch devices */
}
the "@media (hover: none)" rule targets devices that do not support hover, such as smartphones and tablets.
Within the "@media (hover: none)" rule, add the necessary CSS or JavaScript code to disable the hover effect. This may involve changing the CSS selectors or modifying the JavaScript event handlers to use "click" instead of "mouseover" or "mouseenter".
Save the file and preview your store on a mobile device to ensure that the hover effect is disabled and the first tap is recognized as a click.
If this fixed your issue, likes and accepting as a solution are highly appreciated
| Build an online presence with our custom-built Shopify Theme: EcomifyTheme
| Check out our reviews: Trustpilot Reviews
| We are Shopify Partners: EcomGraduates Shopify Partner
How do I disable hover click for the whole store for iOS mobile?
Hi,
Yes, you are right, This theme doesn't have this feature on mobile but it can be possible not big issue.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025