How to Add Wishlist to Product Card

Adding wishlist functionality to product cards allows customers to save products for later directly from collection pages, product grids, and search results. This FAQ covers the different methods to implement wishlist buttons on product cards.

Method 1: Using Theme Customize (Recommended)

This is the easiest method for most users:

1. Enable the App in Theme Customize

• Make sure XB Wishlist is enabled in your theme customize settings

2. Choose a Product Card

• Navigate to your collection page or product grid
• Right-click on a product card and select "Inspect"

3. Find the Product Link Selector

• Look for the product link element in the HTML
• Copy the CSS selector that points to the product page link
• The product link should contain /products/ in the href

Example selector:

.card__heading > .full-unstyled-link[href*="/products/"]

4. Configure in App Settings

• Go to Theme customizer -> App Embed -> Wishlist Collection
• Paste the CSS selector into the "Selector" field

5. Save and Test

• Save your changes
• Visit your collection pages to see the wishlist buttons on product cards

Method 2: Manual Code Implementation (For Developers)

If you need more control or want to customize the button appearance:

1. Edit Theme Code

   • Go to Online Store > Themes > Actions > Edit code
   • Open snippets/card-product.liquid (or your theme's product card template)

2. Add Wishlist Button Code

   <div class='xb-wishlist__btn-custom'>
     <div
       class='xb-wishlist__add'
       xb-product-id='{{product.id}}'
       xb-product-title='{{ product.title }}'
       xb-product-variant='{{ product.selected_or_first_available_variant.id }}'
       xb-is-in-stock='{{ product.available }}'
       xb-product-handle='{{ product.handle }}'
     >
       <button>
         <svg
           xmlns='http://www.w3.org/2000/svg'
           width='20'
           height='20'
           viewBox='0 0 24 24'
           fill='none'
           stroke='#FF4A71'
           stroke-width='2'
           stroke-linecap='round'
           stroke-linejoin='round'
         >
           <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
         </svg>
       </button>
     </div>
   
     <!-- Loading state (optional) -->
     <div class="xb-wishlist__loading" xb-product-id="{{product.id}}">
       <span class="loading-spinner"></span>
     </div>
   
     <!-- Remove from wishlist button -->
     <div class='xb-wishlist__remove' xb-product-id='{{product.id}}' xb-is-in-stock='{{ product.available }}'>
       <button>
         <svg
           xmlns='http://www.w3.org/2000/svg'
           width='20'
           height='20'
           viewBox='0 0 24 24'
           fill='#FF4A71'
           stroke='#FF4A71'
           stroke-width='2'
           stroke-linecap='round'
           stroke-linejoin='round'
         >
           <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
         </svg>
       </button>
     </div>
   </div>

3. Position the Button

   • Place the wishlist button code where you want it to appear on the product card
   • Common positions: top-right corner, bottom of card, or next to the product title

Important Attributes Explained

Add to Wishlist Button Attributes:

• class="xb-wishlist__add" - Required class for add functionality
• xb-product-id="{{product.id}}" - Product ID for wishlist tracking
• xb-product-title="{{product.title}}" - Product title for display
• xb-product-variant="{{product.selected_or_first_available_variant.id}}" - Variant ID
• xb-is-in-stock="{{product.available}}" - Stock availability status
• xb-product-handle="{{product.handle}}" - Product handle for URL generation

Remove from Wishlist Button Attributes:

• class="xb-wishlist__remove" - Required class for remove functionality
• xb-product-id="{{product.id}}" - Product ID for wishlist tracking
• xb-is-in-stock="{{product.available}}" - Stock availability status

Troubleshooting

Wishlist button not appearing:

• Check that the CSS selector is correct and specific
• Ensure the app is enabled in theme customize
• Verify the product link contains /products/ in the URL

Button not working:

• Make sure all required attributes are present
• Check browser console for JavaScript errors
• Verify the app scripts are loading correctly

Styling issues:

• Use custom CSS to override default button styles
• Check for theme CSS conflicts
• Ensure the button container has proper positioning

Best Practices

• Choose the right position: Place buttons where they're easily accessible but don't interfere with the main call-to-action
• Keep it consistent: Use the same button style across all product cards
• Test on mobile: Ensure buttons work well on touch devices
• Consider loading states: Show feedback when users interact with buttons
• Accessibility: Include proper alt text and ARIA labels for screen readers