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

Store Design
,

Topic summary

Users seek to enable second-image hover effects on mobile product cards across various Shopify themes, as the feature typically works only on desktop by default.

Primary Solution Approach:

  • Most fixes involve adding custom CSS code to theme files (commonly Assets/base.css, Assets/component-card.css, or Layout/theme.liquid)
  • Code targets .card-wrapper:hover and .media--hover-effect classes to control image opacity on touch/hover events
  • Implementation varies significantly by theme (Dawn, Broadcast, Prestige, Impact, Sense, Flex, Pipeline, Trade, Sleek, etc.)

Common Challenges:

  • Mobile requires touch-and-hold rather than simple hover, sometimes redirecting to product pages instead
  • Second image may remain visible after touch ends instead of reverting to first image
  • Solutions are theme-specific; code working for Dawn may fail on other themes
  • Some themes lack standard file structures (e.g., missing component-card.css)

Key Contributor:
User EBOOST provides most solutions, offering customized CSS/JavaScript snippets for different themes and troubleshooting implementation issues.

Status:
Partially resolved for many users, though mobile behavior remains imperfect (requiring long-press, not reverting images, or conflicting with navigation). Some themes still lack working solutions.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
80

Hello,

I need again your help.

When the client click on the picture, he can see the second picture.
However, if he wants to buy it, it does work if he clicks on the picture
again. He needs to click the price or description. He can we fix that
please.

Once again, this is on the mobile only. On the desk top,we are not facing
such issue.

Thank you in advance,

Hani