Hello,
I tried this code and worked but now I have 2 product rows. One not working and the second one with the hover, as you can see
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.
1 Like