Hi @eneskbm ,
You can add code below to layout/theme.liquid file before tag.
You can refer the screenshot below:
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, orLayout/theme.liquid) - Code targets
.card-wrapper:hoverand.media--hover-effectclasses 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.
