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

Hi KetanKumar,

is it also possible to put a hover effect on normal images?

I Think about the section image-bar.

Here you can find an example of what I am thinking about: https://dribbble.com/shots/5551370-Portfolio-concept

Thank You

Nicolas

1 Like