A heart icon on a product card is one of the most recognisable UI patterns in e-commerce. It signals ‘save this’ instantly — no label required. Adding this to your Shopify store improves the browsing experience and captures purchase intent from customers who are not ready to add to cart.
Where the Favourite Button Should Appear
- Product detail pages — next to or below the Add to Cart button
- Collection pages — overlaid on the product card image, visible on hover (desktop) or always visible (mobile)
- Search results — allowing saves from the search page without clicking through to the product
- Recommendation widgets — if your theme shows related products at the bottom of a product page
Adding a Heart Button with FoldSpans Wishlist Plus
FoldSpans Wishlist Plus adds a configurable heart/favourite button to your Shopify store. Install from the Shopify App Store — no liquid editing required.
Customise the icon
Choose from heart, star, or bookmark icon styles. Customise the active state colour (the filled-in state when a product is saved) to match your brand colours.
Customise placement
From the app settings, choose whether the button appears on product pages, collection pages, or both. On collection pages, configure whether it appears always or only on hover.
Add a count (optional)
Display how many people have wishlisted each product — ‘Saved by 34 shoppers’. This social proof signal can increase conversion on popular items.
The UX Case for Visible Favourite Buttons on Collection Pages
Collection pages are where customers browse and make initial product judgements. A heart button on the product card lets them build a shortlist without navigating away from the collection. This keeps browsing momentum going and results in more pages viewed per session and a higher likelihood of eventual purchase.
Frequently Asked Questions
Does the heart button fill in immediately when clicked?
Yes. The interaction is instant via JavaScript — no page reload required. The saved state persists on page refresh and across sessions for logged-in customers.
Can I show the button only on specific collections?
Yes. You can configure which pages and sections the button appears on from the app settings.
What happens when a customer clicks the heart on a product they have already saved?
Clicking again removes the product from the wishlist. The icon reverts to its unfilled state.
Install FoldSpans Wishlist Plus to add a heart/favourite button to every product in your Shopify store — no code, fully customisable.
