# Wishlist page

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

The Wishlist Page is where customers view and manage their saved items. This central hub displays all products added to the wishlist, allowing customers to review their selections, add products to cart, or remove items they no longer want.

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

* **Improve User Experience**: Create a clear, intuitive interface for managing saved items
* **Increase Conversions**: Design call-to-action buttons that encourage adding to cart
* **Boost Customer Satisfaction**: Provide flexible viewing options (full page, drawer, or popup)

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

#### Select page type <a href="#select-page-type" id="select-page-type"></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%252FXJC49iZCWrnUVEYHWw4b%252FSelect%2520Page%2520Type.png%3Falt%3Dmedia%26token%3D538577ee-935e-4844-91e0-bee624f0b18b&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=b3ff40df&#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 Page**" tab
* Under "**Page type**", choose how your wishlist will display:
  * **Full page**: Traditional full-page display similar to a collection page
  * **Drawers**: Side panel that slides in from the edge of the screen
  * **Popup**: Modal window that appears over the current page

***

#### Set page title and description <a href="#set-page-title-and-description" id="set-page-title-and-description"></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%252FP8l8GnmBaiOG3HG0CtTh%252FSet%2520Page%2520Title%2520and%2520Description.png%3Falt%3Dmedia%26token%3D2e72a0cd-28b2-41ec-afb2-cd7c512c352b&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=ccdedef6&#x26;sv=2" alt=""><figcaption></figcaption></figure>

* Enter a **Page title** that will appear at the top of the wishlist page
* If you selected "**Full page**" type, you can add a **Page description** that appears below the title
  * Leave the description blank if you don't want to display one

***

#### Customize button text <a href="#customize-button-text" id="customize-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%252FKHDZmFXhOcBmkuqskdFL%252FCustomize%2520Button%2520Text.png%3Falt%3Dmedia%26token%3D47f33e7a-0b74-4552-84dc-e842597b875c&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=9f558de0&#x26;sv=2" alt=""><figcaption></figcaption></figure>

* Under "**Button text**", enter the text for the call-to-action button that adds products to cart
  * Examples: Add to Cart, Add to Bag, Move to Bag, ...

***

#### Set color cheme <a href="#set-color-cheme" id="set-color-cheme"></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%252F4medUHsg4TfsbHFRojqS%252FSet%2520Color%2520Scheme.png%3Falt%3Dmedia%26token%3Df461662d-8cf6-4e7f-802d-7506a77f1913&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=3696a3cf&#x26;sv=2" alt=""><figcaption></figcaption></figure>

Under "**Colors**", customize the appearance of your wishlist page:

* **Text color**: Color for regular text on the page
* **Button text color**: Color for text on the "Add to Cart" buttons
* **Button background color**: Background color for action buttons
* **Button border color**: Color for the border around buttons
* **Page background color**: Background color for the entire wishlist page

***

#### 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>

When you're satisfied with your customizations, click Save to apply them to your store

***

### Page type comparison <a href="#page-type-comparison" id="page-type-comparison"></a>

<table data-full-width="true"><thead><tr><th width="152.20001220703125">Feature</th><th width="182.4000244140625">Full page</th><th>Drawers</th><th>Popup</th></tr></thead><tbody><tr><td>Navigation</td><td>Customers navigate to a separate page</td><td>Slides in without leaving current page</td><td>Appears over current page</td></tr><tr><td>Best for</td><td>Detailed browsing of many wishlist items</td><td>Quick access while shopping</td><td>Quick review without disrupting shopping</td></tr><tr><td>Mobile experience</td><td>Full-screen dedicated view</td><td>Compact sliding panel</td><td>Overlay on current view</td></tr><tr><td>Description support</td><td>Yes</td><td>No</td><td>No</td></tr></tbody></table>

### Design ideas for different store types <a href="#design-ideas-for-different-store-types" id="design-ideas-for-different-store-types"></a>

#### 🧢 Fashion stores: <a href="#fashion-stores" id="fashion-stores"></a>

* Use a full-page layout with large product images
* Add "Size" information to product displays
* Consider a neutral background to highlight product colors

#### 🛋️ Home goods/Furniture: <a href="#home-goods-furniture" id="home-goods-furniture"></a>

* Drawer-style wishlist for easy comparison while browsing
* Include product dimensions in the wishlist display
* Use buttons that match your store's call-to-action styling

#### 💄 Beauty/Cosmetics <a href="#beauty-cosmetics" id="beauty-cosmetics"></a>

* Popup style for quick wishlist checks
* Bright, eye-catching "Add to Cart" buttons
* Consider showing product ratings in the wishlist


---

# 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-page.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.