Card hearts

Plan: every plan, including Free.

A card heart sits on each product card in collections, search results and other product grids, so shoppers can save without opening the product. There are two ways to get them, and you can use both.

Automatic card hearts (app embed)

With the Cove Wishlist app embed on, Cove adds a heart to every product card it can find. Nothing to place by hand. The settings are in the theme editor under App embeds › Cove Wishlist › Product cards:

Setting	What it does	Default
Show hearts on product cards	Turns automatic card hearts on or off.	On
Theme	Detect automatically, Dawn, Horizon or Custom selector. Tells Cove how your theme’s cards are built.	Detect automatically
Product card selector	For other themes: the CSS selector of one product card, for example .product-card. Used with Custom selector, or when automatic detection finds neither Dawn nor Horizon.	Empty

Detect automatically looks at the page: Dawn-style cards first, then Horizon-style cards, and otherwise the selector you typed. Themes built on the same card markup (Prestige, for example) are picked up too. See Theme compatibility for the themes we have checked.

How Cove knows which product a card shows:

• Dawn and Horizon cards carry the product ID in their markup, so their hearts cost no request.
• Cards found with a custom selector need a link to the product (/products/...) inside the card. Cove looks the product up by that link: on page load for shoppers who already have a wishlist (up to 50 cards per request), and otherwise only when the shopper first taps a heart. A card whose link doesn’t match a product in your store gets no heart.

A card that already holds the Cove card heart block (below) is left alone, so you never get two hearts. Cards added later, by infinite scroll, filters or quick view, get their hearts as they appear.

The card heart block

For themes whose product cards accept app blocks (Horizon, for example), you can instead add the Wishlist heart (card) block inside the card in the theme editor.

Setting	What it does	Default
Product	The product the heart saves. Filled in automatically inside a product card.	The card’s product
Position	Over the image (in the corner set in the Design Studio) or In line, where the block sits.	Over the image (top right)

Use the block when you want the heart in a specific place in the card; use automatic hearts when your theme’s cards don’t accept blocks (Dawn’s don’t).

What a card heart saves

A card heart saves the product, not a variant: the shopper hasn’t picked one yet. They choose a variant later, on the wishlist page or in their cart. A product saved this way counts as saving every variant, so the product page’s Wishlist button shows it as saved too.

The heart fills in when the product is on the wishlist (in any variant). Tapping a filled heart removes the product from every list it is on. Each save or removal shows the usual message with Undo.

Position and look

Set in the Design Studio under Cards:

Setting	What it does	Default
Heart position	Top right, Top left, Bottom right or Bottom left.	Top right
Distance from edge	Gap between the heart and the card’s edge, 0–32 px.	8 px
Icon size on mobile	16–40 px.	22 px
Show only on hover	Hearts appear when the pointer is over the card. Saved items always show their heart.	Off

The icon and its colours come from Button. Hearts are positioned over the card, so adding them never shifts the layout.

For screen readers

Each heart is a button named after its product, for example “Save Linen Shirt to wishlist”, and says whether it is pressed (saved).