Hi Tyw!
Thanks for the tutorial. Very useful information!
Topic summary
Add a hover effect to product images on collection/home pages to reveal an alternate image or custom text. Requires editing theme CSS and product image snippets (Liquid) to wrap images in a “reveal” container with a hidden element that fades in on hover.
Key steps and fixes:
- Add the Reveal module CSS (from GitHub); some themes need selector changes (.product-card for Debut, .product–wrapper for Brooklyn). If images duplicate, ensure you replaced the original img markup and included the CSS; otherwise hover won’t work.
- Brooklyn: modify product-grid-item.liquid, duplicate the lazyload image and use product.images[1] as the hidden image; ensure proper Liquid condition spacing (avoid “Unknown operator blank” errors by spacing around == and variables).
- Debut: use theme-specific CSS and selectors; multiple users report success via a linked video tutorial.
- Venture: edit product-card.liquid, remove the “View” overlay, and prefer transition: all for smoother fade.
Common issues: doubled/overlaying images, faded/low-visibility thumbnails, search page Liquid errors, mobile duplicates, missing price/description after edits.
Status: No single official solution; community-supplied, theme-specific implementations. Attachments (GIF, screenshots) and video guides are central. Unresolved for Boundless, Supply, Mobilia, and some Debut variants; requests remain for product-card-grid.liquid guidance.