Collection page icons let customers save products without interrupting their browsing flow. Instead of clicking into each product to save it, shoppers can quickly tap heart icons while scrolling through your catalog. This frictionless experience leads to larger wishlists and deeper engagement with your products.
Why Collection Icons Boost Engagement
When browsing a collection, customers often spot several items they like. Without collection icons, they’d need to:
Click into each product page
Find the wishlist button
Click to save
Navigate back to continue browsing
Collection icons reduce this to a single tap per product. Customers save more items, and you gain more insight into which products generate interest—even from customers who don’t purchase right away.
How Auto-Detection Works
Wishlist automatically finds product cards across your theme. The app scans collection pages, search results, and featured product sections to identify where products are displayed. Icons appear on each product card without manual placement.
This works with most Shopify themes out of the box. If your theme uses a custom product card structure, you may need to adjust settings in the theme editor.
Icon Positioning
Choose where icons appear on product cards:
Top Right - Default position, clearly visible without blocking product images
Top Left - Alternative corner, useful if other badges (sale, new) use top-right
Bottom Right - Near quick-add buttons, keeps icons lower on the card
Bottom Left - Minimal interference with other elements
Configure positioning in Online Store > Themes > Customize, then select the Wishlist app embed settings.
Icon Appearance
Customize how icons look on your product cards:
Icon style - Heart, star, bookmark, or plus icon
Size - Adjust pixel size for desktop and mobile separately
Colors - Set default color, hover color, and saved color
Background - None (transparent), circle, or rounded square background
These settings help icons stand out while matching your theme’s aesthetic.
First-Click Behavior
Choose what happens when a customer clicks an icon for the first time:
Add immediately - The product is saved to the default wishlist instantly. Fast and frictionless for most stores.
Show options - A small menu appears letting customers choose which list to save to. Best for stores using multiple lists.
Already-Saved Indicator
When a product is already in the wishlist, the icon changes to show it:
The icon fills with your “saved color” (often red or a brand color)
Customers immediately see which products they’ve already saved while browsing
Clicking an already-saved icon can either remove the item or show options—configure this in Wishlist > Storefront > Collection Icons.