Add Wishlist Button to Collections Page
Add Wishlist Button to Collections Page
This guide shows you how to display the Wishlist Hero icon on every product card in your collection pages using the Collections Icon embed.
Once enabled, the icon is automatically added to each product card in:
- Collection pages (e.g. `/collections/all`)
- Filtered and sorted collection views
- Search results pages
- Product grids that load more items dynamically (infinite scroll, filter apps)
Step 1: Open the theme editor
In your Shopify admin, go to Online Store > Themes, then click Customize on your live (or draft) theme.
Step 2: Enable the "Collections Icon" block
- In the theme editor's left sidebar, click the App embeds icon (top of the section list).
- Scroll to (or search for) Wishlist Hero.
- Switch on the Collections Icon block.
- Select your theme from Theme preset dropdown.
- Click Save.
What if the icon does not appear?
You can use the Manual setup section to show the Wishlist icon on Collection view pages:
| Setting | What it does |
|---|---|
| Product Card Selector | CSS selector that targets the whole product card in the collection grid. Example: `.card-wrapper.product-card-wrapper` |
| Icon Location (optional) | An element inside the card to place the icon relative to. Leave empty to use the card itself. |
| Icon Placement | How the icon is attached to the location element: First Child below, Before the selector, or After the selector. |
| Product Link (optional) | CSS selector for the product link inside the card. Only use this if the product is not detected automatically. |
How to find your Product Card Selector?
- Open a collection page on your storefront.
- Right-click any product card and choose Inspect.
- In the browser dev tools, hover over the elements to find the outermost element that wraps a single product card (the element that repeats once per product).
- Copy its class and paste it into Product Card Selector, e.g. .my-product-card.