> For the complete documentation index, see [llms.txt](https://wishlistsuite-1.gitbook.io/wishlistsuite-help-doc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wishlistsuite-1.gitbook.io/wishlistsuite-help-doc/app-overview/building-custom-wishlist-buttons-using-the-wishlistsuite-sdk.md).

# Building Custom Wishlist Buttons Using the WishlistSuite SDK

WishlistSuite includes a JavaScript SDK that allows developers to build completely custom wishlist experiences while using WishlistSuite as the backend.

This is ideal for:

* Headless storefronts
* Custom themes
* Unique wishlist designs
* Stores that prefer building their own UI

***

### Before You Begin

The WishlistSuite Embed **must remain enabled** in your theme.

The embed loads the WishlistSuite SDK required for all custom wishlist functionality.

***

### SDK-Only Mode

Enable **SDK-Only Mode** if you plan to build your own wishlist interface.

When enabled:

* Loads only the WishlistSuite SDK
* Hides all built-in WishlistSuite buttons and icons
* Lets you create your own wishlist UI

***

### Available Embed Options

#### Hide Product Button

Hides the built-in **Add to Wishlist** button displayed on:

* Product pages
* Collection pages
* Quick View
* Inline wishlist buttons

Use this when replacing it with your own custom button.

***

#### Hide Product Card Hearts Icon

Removes the wishlist heart shown on collection product cards.

***

#### Hide Cart Save for Later

Removes the WishlistSuite **Save for Later** option from:

* Cart page
* Cart drawer

***

#### Hide Header Wishlist Icon

Removes:

* Header wishlist icon
* Floating wishlist launcher

***

## Creating a Custom Wishlist Button

### Step 1

Go to:

**Online Store → Themes → Edit Code**

***

### Step 2

Create a new Section.

Example:

`custom-wishlist-button.liquid`

Paste your own Liquid code that uses the WishlistSuite SDK.

Save the file.

***

### Step 3

Open the Theme Customizer.

Navigate to your Product Template.

Click:

**Add Section**

Select your newly created section.

Position it where you'd like the wishlist button to appear.

Click **Save**.

***

### Step 4

Visit your storefront and test the button.

Your custom wishlist button should now perform the same wishlist actions while matching your own design.

***

## SDK Reference

WishlistSuite provides reference files and SDK functions for different wishlist operations.

Refer to the SDK documentation to learn how to create custom wishlist icons for different places in your store

{% file src="/files/x4cajsYYz9MtWfq8u6Fw" %}

{% file src="/files/YVY2HqD573NauNgkULcq" %}

{% file src="/files/Z5gmSBA46Si5E4hWbeCK" %}

{% file src="/files/m2NVKWZ2rIzLl6ZmP77a" %}

{% file src="/files/1Aq2oXLYzqNLI45jnqP4" %}