The Wishlist Collection Icon allows customers to save products to their wishlist directly from collection pages, search results, or any page that displays product cards. When clicked, it opens the same wishlist modal as the product page button.

Adding the Collection Icon (Modern Themes)

If your theme supports nested app blocks (like Shopify's Horizon theme), you can add the icon through the theme customizer:

1. Open Theme Customizer: Go to Online Store → Themes → Customize

2. Navigate to a Collection Page: In the page selector dropdown, choose a Collection page

3. Find the Product Card block: In the left sidebar, expand the Collection section and find the Product Card block

4. Add the Wishlist Collection Icon: Click "Add block" inside the Product Card, then select "Wishlist Collection Icon" from the Apps section

5. Configure the icon: You can customize the following settings:

Icon size: Adjust the size from 16px to 32px

Alignment: Choose left or right alignment

Icon color: Set the default icon color

Icon hover color: Set the color when hovering

Modal colors: Customize the modal's background, text, and button colors

6. Save your changes

Adding the Collection Icon (Legacy Themes)

If your theme doesn't support nested app blocks, you can manually add the wishlist icon to your product card template:

1. Find your product card snippet: This is usually located at snippets/product-card.liquid or similar

2. Add the following code inside your product card where you want the icon to appear:

<button type="button" class="ssfy-wishlist-collection-icon" data-ssfy-wishlist-collection data-product-id="##{{ product.id }}" data-variant-id="##{{ product.selected_or_first_available_variant.id }}" aria-label="Add to wishlist"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /> </svg></button><style> .ssfy-wishlist-collection-icon { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; cursor: pointer; color: #121212; transition: color 0.2s ease; } .ssfy-wishlist-collection-icon:hover { color: #666666; }</style>

3. Customize the styling to match your theme by adjusting the colors and positioning

How It Works

The icon automatically detects the product information from the product card

Clicking the icon opens the wishlist modal where customers can add the product to any of their wishlists

If the customer is not logged in, they'll be prompted to log in first

The icon works with lazy-loaded content and infinite scroll

Troubleshooting

Icon doesn't appear:

Make sure the Wishlist app embed is enabled in Theme Settings → App Embeds

For legacy themes, verify the code is placed inside the product card loop where product is available

Modal doesn't open when clicking:

Check browser console for errors

Ensure the product card has data-product-id attribute (either on the icon or a parent element)

Product not being added to wishlist:

Verify the variant ID is being detected correctly

Check that the customer is logged in

If you have questions or need help, reach out through our contact form.