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

Hi @EBOOST ,

Thank you for your reply. Unfortunately, it didn’t work :disappointed_face:

By the way, I use Flex Theme 3.0.0 by Out of the Sandbox.