# Wishlist button

### What is the Wishlist button? <a href="#what-is-the-wishlist-button" id="what-is-the-wishlist-button"></a>

The Wishlist Button is the interactive element that customers click to add products to their wishlist. With Joy Wishlist design, you can customize where these buttons appear and how they look on your product and collection pages.

### Why customize the Wishlist button? <a href="#why-customize-the-wishlist-button" id="why-customize-the-wishlist-button"></a>

* **Increase Wishlist Usage**: Strategic button placement encourages customers to save products
* **Enhance Product Discovery**: Well-designed buttons help customers mark items for later consideration
* **Match Your Brand**: Customize buttons to align with your store's visual identity
* **Improve User Experience**: Clear button styling and text help customers understand the wishlist function

### How to customize the Wishlist button? <a href="#how-to-customize-the-wishlist-button" id="how-to-customize-the-wishlist-button"></a>

#### Choose display locations <a href="#choose-display-locations" id="choose-display-locations"></a>

<figure><img src="https://avadagroup.gitbook.io/joy-wishlist/~gitbook/image?url=https%3A%2F%2F3674262665-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F4avV7pCFFNpyfYTGELr9%252Fuploads%252FB1kWQRMl7Ix0MSqfl8M0%252FChoose%2520Display%2520Locations.png%3Falt%3Dmedia%26token%3Dcba14eb3-3608-459a-b89a-1be9e8721c20&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=6a9409db&#x26;sv=2" alt=""><figcaption></figcaption></figure>

* From your Shopify admin, go to **Apps** > **Joy Wishlist**
* Click on **Wishlist Design** in the navigation menu
* Select the "**Wishlist Button**" tab
* Under "**Button display**", select where to show wishlist buttons:
  * **Show on product details page**: Displays the wishlist button below the add-to-cart button on product pages
  * **Show on home/collection page**: Shows wishlist buttons on product thumbnails in collections and on your homepage

Note: Wishlist button show on Home/Collection page need add snippet code to be able to display

<a href="https://avadagroup.gitbook.io/joy-wishlist/getting-started/publish-your-docs/wishlist-button/add-snippet-code-to-theme-code" class="button secondary">See guide</a>

***

#### Set button text <a href="#set-button-text" id="set-button-text"></a>

<figure><img src="https://avadagroup.gitbook.io/joy-wishlist/~gitbook/image?url=https%3A%2F%2F3674262665-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F4avV7pCFFNpyfYTGELr9%252Fuploads%252F0XfAqxe0FJLBBh0FJeYA%252FSet%2520Button%2520Text.png%3Falt%3Dmedia%26token%3D53691c2d-df53-44e2-82cc-22273c14e3ea&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=2f1a01de&#x26;sv=2" alt=""><figcaption></figcaption></figure>

* Status not added: Text shown when a product hasn't been added to the wishlist yet
* Status added: Text shown when a product is already in the customer's wishlist

#### Style the button <a href="#style-the-button" id="style-the-button"></a>

<figure><img src="https://avadagroup.gitbook.io/joy-wishlist/~gitbook/image?url=https%3A%2F%2F3674262665-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F4avV7pCFFNpyfYTGELr9%252Fuploads%252FiQeomRNYZxvHmfBRwkQu%252FStyle%2520the%2520Button.png%3Falt%3Dmedia%26token%3D3587f559-b292-4c23-bfbb-f13d3cd9993b&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=3c5c4093&#x26;sv=2" alt=""><figcaption></figcaption></figure>

Under "General settings," customize the appearance of your wishlist buttons:

* Button color:
  * Icon color: Color of the wishlist icon (e.g., heart, star)
  * Text color: Color of the button text
  * Border color: Color of the button's border
  * Background color: Color behind the button
* Icon type:
  * Select from preset icons: Heart, Star, Flag
  * Upload a custom icon by clicking the upload icon

***

#### Save your change <a href="#save-your-change" id="save-your-change"></a>

<figure><img src="https://avadagroup.gitbook.io/joy-wishlist/~gitbook/image?url=https%3A%2F%2F3674262665-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F4avV7pCFFNpyfYTGELr9%252Fuploads%252Fxt1aPOKlY4PXkUkJhKYu%252FBa%25CC%2589n%2520sao%2520Save.png%3Falt%3Dmedia%26token%3De05bfb76-f248-4325-9e56-cfa6ee0043da&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=c047a73e&#x26;sv=2" alt=""><figcaption></figcaption></figure>

After making your selections, click Save to apply your changes to your store.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.joy.so/joy-wishlist/getting-started/wishlist-design/wishlist-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.