Add a wishlist button to the product page

Make sure you enable the app in your theme customize.

1. Go to theme customize
2. Select Product page
3. Add app section Button Wishlist
4. Move to your desired position
5. Save and publish

Customize button for developers

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>