Product card hearts
Card hearts let shoppers save while browsing a grid. Choose the storefront surfaces, place the icon within the card and test how that theme represents products without a selected variant.
Enable the intended surfaces
- 1
Open Display → Wishlist button
Turn on Show wishlist icon on product cards. The surface and card-style controls appear beneath it.
- 2
Choose Show on these pages
Select the surfaces you use: Collection pages, Search results, Home page, and Product pages (related products). A selected surface is an instruction to detect cards on that page; the theme still needs a recognizable card structure.
- 3
Choose position and visibility
Set Icon position on cards to the corner with the least overlap with sale labels or quick-add buttons. Choose the visibility mode below and check it in the Collection preview.
| Icon visibility | Unsaved card | Saved card |
|---|---|---|
| Always visible | Visible | Visible |
| On hover (saved items stay visible) | Visible on pointer hover | Visible without hovering |
| On hover (hide saved items too) | Visible on pointer hover | Visible on pointer hover |
Touch devices
Cards show their save icon on touch devices. A hover-only rule would otherwise leave shoppers without a visible target.
Style the card control
Card icon can inherit the main icon or use its own shape. Heart interaction chooses the movement effect. Use separate background and icon colours for the normal and saved state. Heart size accepts 30–60 px, and Distance from image edge accepts 0–40 px.
Start with a size of 40 px and an 8 px inset, then inspect the actual card. Moving a heart away from a sale badge can be more useful than making it smaller. Save after adjusting the controls.
When automatic card detection misses
- 1
Identify one complete product card
Inspect the grid on the affected page. The Product card selector (optional) should match the repeated product-card element, not the entire grid or just its price label.
- 2
Save the selector and reload
Enter the selector in Display and save. Confirm there is one usable save control per intended card and that clicking it does not accidentally open the product.
- 3
Check the other surfaces
A home-page slider and a search grid may use different card markup. Test each selected surface and any products added by Load more or filtering.
What is saved without a variant picker
A card can save a product-level item. That does not select a particular size. For a precise restock request, open the product page, select the unavailable variant and use Notify me when back. Price-drop and low-stock matching for a product-level save is only unambiguous when the product has one variant.
Need help?
Open the chat bubble in the Shopify app, or contact us with your store address and what you are stuck on.