Add a wishlist button to the product collection

Make sure you enable the app in your theme customize.

Using app embeds in theme customize

You can choose how to display the wishlist page to your customers. There are two options available:

1. Choose a product card
2. Right click to your product card and choose Inspect

3. Product link selector

   The product link is defined by a CSS selector, which points to an anchor element with a product page href. We recommend to be as specific as possible with this selector to avoid injecting the button in unwanted places. We often use a selector with a pattern match to reference product links.

Result:

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

4. Paste it to the app

Customize button for developers

1. Go to edit code of theme

2. Edit snippets/card-product.liquid

   We provide you with 2 buttons: add wishlist button, remove wishlist button

• Add wishlist button includes the attributes:

  class="xb-wishlist__add", xb-product-id='{{ product.id }}', xb-product-title='{{ product.title }}'

• Remove wishlist button includes the attributes:

  class="xb-wishlist__remove", xb-product-id='{{ product.id }}'

Example:

<div class='xb-wishlist__btn-custom'>
  <div class='xb-wishlist__add' xb-product-id='{{product.id}}' xb-product-title='{{ product.title }}' xb-is-in-stock='{{ product.available }}'>
    <button>
      {% render 'icon', name: 'heart', icon_size: '20', color: '#FF4A71' %}
    </button>
  </div>
  <div class='xb-wishlist__remove' xb-product-id='{{product.id}}' xb-is-in-stock='{{ product.available }}'>
    <button>
      {% render 'icon', name: 'heart-2', icon_size: '20', color: '#FF4A71' %}
    </button>
  </div>
</div>