You can add wishlist buttons anywhere on your site using custom HTML. This is useful for creating tailored experiences that match your brand.

Add this HTML anywhere in your theme to create a wishlist button:

html <button class="wishlist-btn" data-product-handle="your-product-handle"> Add to Wishlist </button>

Replace your-product-handle with the actual product handle (the URL-friendly name of the product).

Add an icon to your button using the data-icon-type attribute:

html <button class="wishlist-btn" data-product-handle="your-product-handle" data-icon-type="icon_heart"> Add to Wishlist </button>

Control where the icon appears relative to the text:

html <button class="wishlist-btn" data-product-handle="your-product-handle" data-icon-type="icon_heart" data-icon-position="after"> Add to Wishlist </button>

Create a button with just an icon (no text):

html <button class="wishlist-btn" data-product-handle="your-product-handle" data-icon-type="icon_heart" data-text-hidden="true"> </button>

Change the button text after a successful add:

html <button class="wishlist-btn" data-product-handle="your-product-handle" data-success-text="Saved!"> Add to Wishlist </button>

After the customer adds the item, the button text changes to “Saved!” and shows a success state.

Target a specific variant instead of the default:

html <button class="wishlist-btn" data-product-handle="your-product-handle" data-variant-id="12345678901234"> Add to Wishlist </button>

Create a button that adds to wishlist AND removes from cart:

html <button class="wishlist-btn wishlist-save-for-later" data-product-handle="your-product-handle" data-variant-id="12345678901234" data-line-item-key="abc123:def456" data-success-text="Saved!"> Save for Later </button>

The data-line-item-key should be the cart line item key. When clicked:

liquid <button class="wishlist-btn" data-product-handle="#{{ product.handle }}" data-variant-id="#{{ product.selected_or_first_available_variant.id }}" data-icon-type="icon_heart" data-success-text="#{{ 'wishlist.saved' | t }}"> #{{ 'wishlist.add_to_wishlist' | t }} </button>

liquid {% for item in cart.items %} <button class="wishlist-btn wishlist-save-for-later" data-product-handle="#{{ item.product.handle }}" data-variant-id="#{{ item.variant_id }}" data-line-item-key="#{{ item.key }}" data-success-text="Saved!"> Save for Later </button> {% endfor %}

The button automatically receives these classes based on state:

```css .wishlist-btn { background: transparent; border: 1px solid #333; padding: 10px 20px; cursor: pointer; transition: all 0.2s; }

.wishlist-btn.success { background: #e8f5e9; border-color: #4caf50; color: #4caf50; }

.wishlist-btn.busy { opacity: 0.6; pointer-events: none; } ```

Custom buttons toggle between add and remove states:

The success class is added or removed accordingly, and the icon switches between outline and filled states.