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

Yes, I have been following the instructions, but product-grid file is not exactly as it is stated above. Please see product grid file for SRC spot. How would I place this code here to show second image on hover. I believe I have CSS correct, but we can check after this step if it still does not show.

I was trying to place it here in the file named: product-card-grid.liquid

{{ preview_image.alt }}