Product card hover images that list the benefits
What they do
Hover over a product and the jar swaps for four lines on what it's for: Magnesium becomes "42 minutes extra sleep". On mobile it's the second image when you swipe.
Why it works
Every product comes in the same amber jar, so the main photo can't tell one from another. The second image answers "what's this one for?" without a click, and you can scan it across a whole row. The same benefits sit as text under the price too, so they're not locked inside an image.
Makes sense when
Ranges where the packaging all looks the same: supplements, candles, coffee, skincare in matching bottles. Use one template across the range or the grid looks messy, and keep the benefits in the card text as well.
More like this
More collection patterns
Want this on your store?
I'll tell you which of these patterns will move organic revenue for your catalogue, and which to skip.
Book a discovery call