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, email us at [email protected].

How to add Wishlist icon to Collection Pages

Adding the Collection Icon (Modern Themes)

Adding the Collection Icon (Legacy Themes)

How It Works

Troubleshooting