A staggered collection grid with notched cards. Hovering a card sweeps in the product's lifestyle shot, so shoppers see it in use without leaving the page. It picks up each product's second image automatically, with no JavaScript and no extra setup per product.
Collection pages show rows of products on plain backgrounds. That's great for comparing, but it says little about how a product looks in real life, so shoppers have to open each one to find a lifestyle shot. I built this on my demo store to bring that shot to the collection page itself.
The shopper experience
See it in use, at a glance
Hovering a card sweeps the lifestyle shot down from the top with a curved edge and highlights the outline. Moving away plays it in reverse.
Works with a keyboard too
Tabbing to a card triggers the same reveal and highlight, and visitors who prefer reduced motion get a gentle fade instead of the sweep.
No guesswork on touch screens
Phones and tablets skip the reveal, so a tap always opens the product. No confusing tap-once-to-preview step.
What you control
It's set up in the theme editor and runs on the product photos you already manage.
Add a lifestyle shot as a product's second image, and the reveal picks it up automatically
Choose how many products show per page, with pagination for the rest
Outline and highlight colors follow your theme's color scheme, so they always match your store
It's its own collection template, so you decide exactly which collections use it
Products with only one photo still get the highlight, so nothing looks broken
Adapting it to your store
For your store, I'd fit the card shape and spacing to your brand, make sure your lifestyle photos crop well in the card, and choose the collections where it'll have the most impact.