Hi @iamcurious nice to know it works on your website.
however, how did you manage to get it work for all the rows?
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.