How can I fix the iOS double tap problem for hover effects?

Store Design
, , ,

Topic summary

Issue: On iOS, there is no true hover state, so the first tap triggers a hover effect and the second tap triggers the click, forcing a double tap for interactive elements.

Goal: Make interactions trigger with a single tap on mobile devices.

Proposed approach: Disable hover behavior on touch devices and rely on click. Key snippet: use the CSS media query @media (hover: none) to neutralize hover styles on smartphones/tablets. Where JavaScript is used, replace mouseover/mouseenter handlers with click.

Shopify steps: In Online Store > Themes > Actions > Edit code, find the CSS/JS implementing hover effects. Add/override rules inside @media (hover: none) to remove hover styling, and update JS to click. Save and test on a mobile device.

Open question: How to disable hover across the entire store on iOS. A developer confirmed it’s feasible even if the theme lacks a built-in setting, but no global snippet or detailed storewide implementation was provided.

Status: Guidance and direction shared; no finalized, storewide solution posted yet; discussion remains open.

Summarized with AI on January 14. AI used: gpt-5.
1

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/

2

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:

  1. In your Shopify admin panel, go to “Online Store” > “Themes” and click on “Actions” > “Edit code” for the theme you’re working on.
  2. In the file list, find the file that contains the code for the hover effect you want to disable. This could be a JavaScript file or a CSS file, depending on how the hover effect is implemented.
  3. Add the following code to disable the hover effect on touch devices:
@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.

  1. 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”.

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

3

How do I disable hover click for the whole store for iOS mobile?

4

Hi,
Yes, you are right, This theme doesn’t have this feature on mobile but it can be possible not big issue.