Overview
Collection pages are where customers browse multiple products at once, making them one of the highest-impact locations for wishlist engagement. Adding a wishlist icon directly on the product card allows shoppers to save items quickly without opening each product page. This significantly increases wishlist activity and reveals valuable insights into browsing patterns.
This article explains how to enable and configure wishlist icons on collection pages.
1. Enable Wishlist on Collection Pages
To turn on the feature:
Open Flits Wishlist
Go to Wishlist Design → Collection Page
Toggle Show Wishlist Icon on Collection Page → ON
If disabled, no wishlist icons will appear on product cards in your collections.
2. Icon Placement Options
Flits provides four image-overlay positions, allowing you to adapt the icon’s placement to match your theme style.
Available placements:
Top Left
Top Right (most popular for fashion & lifestyle)
Bottom Left
Bottom Right
Recommendations:
Top Right works best for clean product cards, especially when price/title are centered.
Bottom Corners work well when the card includes badges (e.g., SALE, NEW) at the top.
3. Customize Icon Size & Background
To ensure visibility across image sizes, adjust:
Icon Size — controls heart icon dimension
Background Opacity — ensures icon is visible on busy images
Best Practices:
Keep opacity between 20–40% for subtle visibility
Increase opacity for dark or high-contrast product images
4. Wishlist Count Display on Collection Pages
Similar to product pages, you can choose:
No Count — clean design
General Count — shows total wishlist items
Button Count — shows product-specific count
Displaying count may increase social proof for trending products.
5. Styling & Custom CSS
You can further adjust:
Icon color
Hover state
Active state (filled heart when product is saved)
Custom CSS for advanced themes
Use custom CSS to match your brand style or reposition the icon precisely within your card layout.
6. Testing Collection Page Setup
After saving your settings:
Open a collection on your storefront
Confirm icon appears on each product card
Test add/remove actions directly from the card
Test responsiveness on mobile
Ensure icons do not overlap with badges or text
If icons don’t appear, double-check:
Theme embed is enabled
Wishlist Status is ON
Collection page settings are saved
Next Step
Now that wishlist appears where customers browse, finalize the experience by configuring the wishlist page layout.
Continue to: Setting Up the Wishlist Page
For assistance or additional information on the Wishlist App, our team is available at support@getflits.com.