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 }}"
    xb-product-variant="{{ product.selected_or_first_available_variant.id }}"
    xb-is-in-stock="{{ product.available }}"
    xb-product-handle="{{ product.handle }}"

• Remove wishlist button includes the attributes:

  class="xb-wishlist__remove" xb-product-id="{{product.id}}" xb-is-in-stock="{{ product.available }}"

Example:

<div class="xb-wishlist__btn-custom">
  <button
    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 }}"
  >
    <span class="xb-wishlist__button-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
        <path d="M223,57a58.07,58.07,0,0,0-81.92-.1L128,69.05,114.91,56.86A58,58,0,0,0,33,139l89.35,90.66a8,8,0,0,0,11.4,0L223,139a58,58,0,0,0,0-82Zm-11.35,70.76L128,212.6,44.3,127.68a42,42,0,0,1,59.4-59.4l.2.2,18.65,17.35a8,8,0,0,0,10.9,0L152.1,68.48l.2-.2a42,42,0,1,1,59.36,59.44Z"></path>
      </svg>
    </span>
  </button>
  <button class="xb-wishlist__loading" xb-product-id="{{product.id}}">
    <span class="xb-wishlist__button-icon">
      <span class="xb-wishlist__button-icon--loading"></span>
    </span>
  </button>
  <button class="xb-wishlist__remove" xb-product-id="{{product.id}}" xb-is-in-stock="{{ product.available }}">
    <span class="xb-wishlist__button-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
        <path d="M240,98a57.63,57.63,0,0,1-17,41L133.7,229.62a8,8,0,0,1-11.4,0L33,139a58,58,0,0,1,82-82.1L128,69.05l13.09-12.19A58,58,0,0,1,240,98Z"></path>
      </svg>
    </span>
  </button>
</div>