Reveal second image on hover - Debut theme

Store Design

Topic summary

Users seek to implement a hover effect on product images in Shopify’s Debut theme, where a second product image appears when hovering over the first. The solution involves adding custom CSS code to theme.css (or theme.scss.liquid) and modifying the product-card-grid.liquid file.

Common implementation steps:

  • Add CSS for the reveal module to theme.css
  • Modify product-card-grid.liquid to include secondary image markup with specific classes
  • Additional CSS may be needed to fix spacing, vendor name duplication, or mobile display issues

Frequent problems reported:

  • Images appearing blank/stacked instead of switching on hover
  • Duplicate product rows appearing
  • Last image in gallery showing instead of second image
  • Mobile devices displaying stacked images
  • Missing theme.scss.liquid file in newer Debut versions

Key troubleshooting:

  • Ensure both CSS and liquid file modifications are applied correctly
  • Verify products have multiple images uploaded
  • Check for conflicting code or apps
  • Some users required personalized code adjustments for their specific theme version

The discussion remains active with ongoing troubleshooting, though several users successfully implemented the feature with guidance.

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

@iamcurious @KetanKumar

Thanks a lot, this finally worked for me after trying many times before with different solutions and failing.

However, the only problem I have is that the hover seems to always show the LAST picture in the gallery whereas I would prefer it to be the second picture. Is there any solution for this?

Thanks a lot, again

Website: www.umacantik.com

1 Like