Add a wishlist button to the product page

To enable this feature, you need to go to XB Wishlist app > Features > enable Product Wishlist Button.

Currently, there are 3 ways to add the wishlist button to the product page:

1. Automatic integration: We have an automatic recognition mechanism for up to 100+ popular themes today. However, during the editing process, your theme may differ from the original theme we support. Therefore, you can contact [email protected] for support or follow the 2 alternative methods below.
2. Using App block in Shopify theme editor
3. Custom code

2. Using App block in Shopify theme editor

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

3. Custom code

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 }}" 
  xb-product-variant="{{ product.selected_or_first_available_variant.id }}"

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 }}" xb-product-variant="{{ product.selected_or_first_available_variant.id }}">
    <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>