Untitled

<form id="wishlist_form_{{- product.id -}}" class="ml-auto" data-shopify-wishlist-form>
  {%- assign image_url = product.featured_image | image_url: width: '1024' -%}
  <input type="hidden" name="ProductId" value="{{- product.id -}}">
  <input type="hidden" name="ProductHandle" value="{{- product.handle -}}">
  <input type="hidden" name="ProductVariantId" value="{{- product.selected_or_first_available_variant.id -}}">
  <input type="hidden" name="ProductName" value="{{- product.title | escape -}}">
  <input type="hidden" name="ProductImage" value="{{- image_url | remove: '&width=1024' -}}">
  <input type="hidden" name="ProductLink" value="/products/{{- product.handle -}}">
  <input type="hidden" name="ProductTitle" value="{{- product.title -}}">
  <input type="hidden" name="ProductPrice" value="{{- product.price | money_without_currency | remove: ',' -}}">

  <button
    type="submit"
    class="group/wishlist loading disabled:pointer-events-none disabled:cursor-not-allowed loading:pointer-events-none loading:cursor-not-allowed"
    disabled
    data-shopify-wishlist-button>
    <svg class="w-5 h-5 text-black group-active/wishlist:hidden group-loading/wishlist:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
      <path d="M33.545 4A11.235 11.235 0 0024 9.143 11.235 11.235 0 0014.455 4 11.476 11.476 0 003 15.429C3 26.857 24 44 24 44s21-17.143 21-28.571A11.476 11.476 0 0033.545 4z" stroke-linecap="square" stroke-width="2" fill="none" stroke="currentColor" stroke-miterlimit="10"/>
    </svg>

    <svg class="hidden w-5 h-5 text-black fill-black group-active/wishlist:block group-loading/wishlist:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
      <path d="M33.545 4A11.235 11.235 0 0024 9.143 11.235 11.235 0 0014.455 4 11.476 11.476 0 003 15.429C3 26.857 24 44 24 44s21-17.143 21-28.571A11.476 11.476 0 0033.545 4z" stroke-linecap="square" stroke-width="3" fill="currentColor" stroke="currentColor" stroke-miterlimit="10"/>
    </svg>

    <svg class="hidden w-5 h-5 text-black animate-spin group-loading/wishlist:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
      <g fill="currentColor"><g><path d="M24 47a23 23 0 1 1 23-23 23.025 23.025 0 0 1-23 23zm0-42a19 19 0 1 0 19 19A19.021 19.021 0 0 0 24 5z" opacity=".4"></path><path d="M47 24h-4A19.021 19.021 0 0 0 24 5V1a23.025 23.025 0 0 1 23 23z"></path></g></g>
    </svg>
  </button>
</form>