Heart over the product image
Plan: every plan, including Free.
Instead of a button under the price, the Wishlist button block can show a round heart in the corner of the product’s image gallery, the way many fashion stores do.
Turn it on
Section titled “Turn it on”- In the theme editor, open your product template and select the Wishlist button block (add it first if it isn’t there: see Add the Wishlist button).
- Set Position to Over the product image.
- Save.
| Setting | What it does | Default |
|---|---|---|
| Position | Where the block is placed (the regular button) or Over the product image (the heart). | Where the block is placed |
| Product image selector | Optional. The CSS selector of the product image gallery, for example .product__media. Dawn and Horizon need nothing. |
Empty |
How the heart finds the gallery
Section titled “How the heart finds the gallery”A theme block can’t be placed inside the theme’s image gallery, so the heart starts hidden where the block sits and Cove moves it into the gallery of the same product section. It tries, in order:
- The Product image selector you typed, if any.
- Dawn’s main image viewer (not its thumbnails).
- The
media-galleryelement that Dawn and Horizon both use.
If none is found, the heart shows where the block is placed, in line, so it is never missing. If your theme isn’t found automatically, type its gallery selector; see Theme compatibility.
The heart starts hidden and takes no space, so moving it causes no layout shift. When the theme redraws the product section (a variant change, for example) the heart is put back in place.
Position and look
Section titled “Position and look”The heart uses the corner chosen under Heart position in Design › Cards, always at the top of the image: a bottom-left setting shows top left, and bottom right shows top right. The bottom of a gallery is often thumbnails or the last of several stacked images. Icon and colours come from Button.
What it saves
Section titled “What it saves”Like a card heart, the heart over the image saves the product, not the selected variant. The shopper picks a variant later on the wishlist page. If you want the selected variant saved, keep the regular button (Position: Where the block is placed); you can add the block twice, once in each position.
Screen readers hear it as “Add to wishlist” (or your own label from Design › Labels), with its pressed state.
If social proof is on (Pro and Premium), the “Saved by … shoppers” line stays where the block is placed.