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

Thanks you.

Which coding should I be following there’s a few linked above and I am not entirely sure I follow which one you are referring to? Some links say to update the theme and product coding and some just suggest the Theme.

Please note my store does not have theme.scss.liquid so do I use theme.css or theme.liquid

thank you

1 Like