What is the Lifestyle Image Hover?
The Lifestyle Image Hover lets you show a second image on each product card when a shopper hovers over the card in a ProductGrid module. This is a standard merchandising pattern. The first image shows the product cleanly, the hover reveals context, styling, or a lifestyle shot.
Before this update, ProductGrid cards displayed a single product image on hover, with carousel arrows as the only way to preview additional images. Now you can choose between the existing carousel-arrows behavior or a crossfade to a second image you pick per product.
By default, every product's hover image is set to the second image in its media gallery (falling back to the first if only one exists), so grids look right out of the box. You can override the hover image for any product individually.
How to turn on Lifestyle Image Hover
Open your funnel in the Layout Editor and select a ProductGrid module.
Find the Hover Effect setting in the ProductGrid editor panel. A dropdown lets you choose between "Carousel arrows" (the existing default) and "Lifestyle image."
Select "Lifestyle image." Every card in the grid immediately defaults to the product's second image on hover.
Customize per product (optional). For each product in the grid, click the hover-image thumbnail and pick any image from that product's media gallery.
Preview in the editor. Hover over product cards to confirm the crossfade behavior.
Publish your funnel to push the change live.
Where it works
Surface | Supported |
Product funnels (Grid module) | ✅ |
Landers (ProductGrid module) | ✅ |
Shop previews | ✅ |
PDPs | Not applicable (PDPs show a single product) |
Use cases
Show context beside the cutout. Pair a clean white-background product shot with a lifestyle hover that shows the product in use, on a model, or in a styled scene. The grid stays scannable while adding depth for shoppers who linger.
Highlight scale or fit. For apparel and furniture, default hover to an on-model or in-room image so shoppers can judge fit and proportion without clicking into the PDP.
Surface bestseller pairings. For categories where bundles and pairings drive AOV, hover to an image showing the bestseller styled with complementary products.
Refresh seasonal campaigns without reshooting. Swap the hover image to a campaign or seasonal lifestyle shot while keeping the primary product image steady. Easy to rotate for seasonal moments.
FAQs
Does this work with A/B tests?
Yes. You can run an experiment that compares the new Lifestyle Image hover against the existing carousel-arrows behavior for the same ProductGrid.
What happens if a product only has one image?
The hover effect falls back gracefully. If the second image doesn't exist, the first image is used, so the grid never breaks.
Can I set the hover image for only some products?
Yes. The default applies to every product automatically, but you can override the hover image for any individual product without affecting the rest.
Does this affect page performance?
Hover images are loaded as part of the product card so the crossfade is instant. Standard image optimization applies, including lazy loading for cards below the fold.
Does this work on mobile?
The hover interaction is a desktop behavior. On mobile, the ProductGrid falls back to its native mobile image behavior (tap to open the PDP).