> ## Documentation Index
> Fetch the complete documentation index at: https://codebeans-wishlyst.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Collection page hearts

> Show a wishlist icon on product cards in collections, search and featured product grids.

![Hearts on product cards. A filled heart means the product is saved.](https://mintcdn.com/codebeans-wishlyst/FOg6WqIIKdNxdSzd/images/mockups/collection-hearts.png?fit=max\&auto=format\&n=FOg6WqIIKdNxdSzd\&q=85\&s=c874dc305b95f6a128effdb4b3c690c4)

Hearts on product cards. A filled heart means the product is saved.

**Where:** **Manage Wishlist → Collections**

Shoppers can save products straight from the grid, without opening each product. Hearts appear on product cards in collections, search results, featured collections, recommendations and the cart drawer.

> [!NOTE]
>
> The **Wishlist on collection page** toggle under **Insights → Wishlist Settings** must be activated, and the **Wishlist Engine** app embed must be on.

## Icon position

**Top Left** (default), **Top Right**, **Bottom Left** or **Bottom Right** of the product card.

## Custom CSS selector

The app detects product cards on most themes. If yours uses custom cards, enter a selector in **Custom Collection Selector**, for example `.product-item` or `.card-wrapper`. Separate several selectors with commas. Every matching element gets its own icon.

**Icon Placement** controls where the icon goes relative to that selector:

* **Inside selector** (default)
* **Above selector**
* **Below selector**

## Style

| Setting | Default |
| - | - |
| Button Type | Only Icon |
| Appearance | Solid |
| Border radius | 20 px |
| Icon size | 40 px |
| Font size | 13 px |

You can also set the label (for "Icon and Text"), the icon colors and the text colors, as on the [product page](https://codebeans-wishlyst.mintlify.site/guides/customize/product-page.md#colors-and-icon).

> [!TIP]
>
> Infinite scroll or "Load more" not getting hearts? See [Troubleshooting](https://codebeans-wishlyst.mintlify.site/troubleshooting.md#hearts-missing-on-some-product-cards).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.