Dawn Theme ; How To Get Second Image On Hover For Mobile

Retired Boards Appdev Store Design

Topic summary

Users are seeking to enable the second image hover effect on mobile devices for Shopify’s Dawn theme, as it works by default only on desktop.

Initial Solution:

  • Add CSS code to component-card.css targeting mobile screens (max-width: 481px)
  • The code applies hover transforms and opacity transitions to product card images

Implementation Issues:

  • Some users report the effect only works in specific sections (“You may also like” recommendations) but not on collection pages or landing pages
  • One user notes it works everywhere except search results pages
  • Another user finds the effect too sensitive and asks about adjusting hover duration

Alternative Approach:

  • Try adding the code to base.css instead of component-card.css for broader application
  • Verify that “Show second image on hover” is enabled in theme settings

Current Status:
The discussion remains open with partial solutions. While the CSS code works for some users in certain sections, achieving consistent mobile hover effects across all product displays (collections, landing pages, search results) appears unresolved for multiple participants.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
7

@made4Uo I did this, the hover effect is only working in “You may also like” under the product page. its not working in collections or featured collection section. Please view my website from mobile and help me

Password:shopify123