Collection Page Icons

Quick add icons appear on product cards throughout your store, allowing customers to add products to their wishlist with a single click without leaving the collection page.

Enabling Quick Add Icons

Quick add icons are controlled through your theme editor:

Go to Online Store > Themes > Customize
Find the Wishlist app embed in theme settings
Toggle Enable quick add buttons ON
Click Save

How Icons Work

When a customer clicks a quick add icon:

Single variant products - Added directly to wishlist
Multi-variant products - A modal appears to select the variant
Multiple lists enabled - A list selector appears after variant selection

The icon automatically updates to show the saved state when a product is in the customer’s wishlist.

Removing Items

When a customer clicks the icon on an already-saved product:

The item is removed from their wishlist
The icon returns to the unsaved state
A notification confirms the removal

Customization Options

Icon Type

Choose from several icon styles:

Heart - Classic wishlist icon (default)
Star - For favorites-style wishlists
Bookmark - For save-for-later style
Plus - Minimal add icon

Icon Position

Place the icon where it works best with your product cards:

Top Right (default)
Top Left
Bottom Right
Bottom Left

Background Style

Control how the icon appears over product images:

None - Icon only, no background
Circle - Circular background behind the icon
Rounded - Rounded rectangle background

Fill Style

Choose how the icon changes when a product is saved:

Outline to Filled - Shows outline normally, fills in when saved (default)
Always Filled - Icon is always filled, changes color when saved
Outline Only - Icon stays outline, only color changes when saved

Size Settings

Icon Size - Size on desktop devices (10-100px)
Mobile Icon Size - Size on mobile devices (10-100px)
Padding - Distance from the edge of the product card (0-30px)

Colors

Customize icon colors to match your theme:

Icon Color - Default state color
Hover Color - Color when hovering over the icon
Saved Color - Color when the product is in the wishlist

Theme Compatibility

Quick add icons automatically detect product cards in most themes by looking for common selectors:

.card__inner
.product-card
.product-item

If your theme uses different markup and icons aren’t appearing, contact support for assistance.

Best Practices

Use contrasting colors - Make sure the saved state is clearly visible
Position carefully - Avoid overlapping with sale badges or quick-view buttons
Test on mobile - Ensure icons are easy to tap on touch devices
Match your brand - Choose colors that complement your store design