> For the complete documentation index, see [llms.txt](https://magecomp.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://magecomp.gitbook.io/shopify/apps/wishy-wishlist-app/dashboard.md).

# Dashboard

The Dashboard is the first screen you'll see after opening the app. It gives you quick access to all wishlist features and shows how customers are interacting with your wishlist.

The dashboard is divided into two sections:

1. **App Status**
2. **Analytics (Last 30 Days)**

<figure><img src="/files/Z9G0drjVniUhi3MoLbVf" alt=""><figcaption></figcaption></figure>

## App Status Section

Think of this section as your control center.

Each card represents a feature of the app. If a feature is inactive, simply click **Enable** to activate it.

### <mark style="color:$primary;">Product Wishlist</mark>

#### Product Wishlist

**What is it?**

Product Wishlist adds an **"Add to Wishlist"** button directly to your product pages, allowing customers to save products they are interested in for future purchases.

**Example**

A customer visits your **Running Shoes** product page.

They like the product but are not ready to buy it yet.

Instead of leaving and potentially forgetting about the product, they click ❤️ **Add to Wishlist**.

The product is saved to their wishlist, making it easy to find again when they're ready to purchase.

To use this feature, enable it from the dashboard.

<figure><img src="/files/6n2Aje9fNR5DOCjbeBpd" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/7YvHzGvWy15zzrSDEw9q" alt=""><figcaption></figcaption></figure>

#### Customization Options

You can fully customize the appearance and behavior of the Product Wishlist button to match your store design.

**Style Settings**

Control how the wishlist button looks and behaves.

Available options include:

* Button Style (uses your store's color scheme)
* Alignment (Left, Center, Right)
* Top Margin
* Bottom Margin
* Maximum Width
* Horizontal Padding
* Full Width Button
* Show or Hide Button Text
* Show or Hide Icon
* Sparkle Animation
* Add-to-Wishlist Notification
* Button Animation Effects

**Example Settings**

* Style: Solid (Accent Color)
* Alignment: Left
* Horizontal Padding: 15px
* Show Text: Enabled
* Show Icon: Enabled
* Sparkle Animation: Enabled

<figure><img src="/files/Fsy9QyVFAclXzyx5Ca0p" alt=""><figcaption></figcaption></figure>

**Button Animation**

Choose how the wishlist button behaves when customers interact with it.

**Options:**

* None
* Additional animation styles (if available)

Animations can help draw attention to the wishlist button and improve engagement.

<figure><img src="/files/YXdZFbWinuOpo1wIrnlM" alt=""><figcaption></figcaption></figure>

**Icon Settings**

Customize the wishlist icon displayed within the button.

Options include:

* Icon Type
* Icon Size
* Stroke Thickness
* Icon Gap (Spacing between icon and text)

**Example Settings**

* Icon Type: Heart
* Size: 18px
* Stroke Thickness: 1px
* Icon Offset (Gap): 5px

**Label Settings**

Customize the text displayed on the wishlist button.

**Label (Not in Wishlist)**

Displayed before the product is added.

**Example:** Add to Wishlist

**Label (In Wishlist)**

Displayed after the product has been added.

**Example:** In Wishlist

<figure><img src="/files/Dw0bOZ8P5WsEM2TY7rDV" alt=""><figcaption></figcaption></figure>

**Wishlist Count Display**

Display social proof by showing how many shoppers have added the product to their wishlist.

This can encourage additional wishlist activity and create a sense of product popularity.

**Available Options**

* Show Wishlist Count
* Count Icon Type
* Count Box Background Color
* Count Box Border Color
* Count Icon Color
* Count Text Color
* Count Message Text

**Example Message :** 25 people have added this product to their wishlist

You can fully customize the appearance and wording of this message to match your store's branding.

<figure><img src="/files/ppjxjY0gmduz2DiFhvi0" alt=""><figcaption></figcaption></figure>

#### How to Enable

1. Click **Add App Block**.
2. Shopify Theme Editor will open.
3. Add the **Wishy Wishlist Product** block to your product page.
4. Save your theme.
5. Configure the button style, icon, labels, animations, and wishlist count display as desired.

Once enabled, customers can save products directly from the product page, helping increase engagement and encouraging future purchases.

<figure><img src="/files/wisDxXtzbC7SiDdHKg30" alt=""><figcaption></figcaption></figure>

### <mark style="color:$primary;">Collection Wishlist</mark>

#### Collection Wishlist

**What is it?**

Collection Wishlist allows customers to add products to their wishlist directly from collection, category, or product listing pages without opening individual product pages.

**Example**

Imagine a customer is browsing a collection with 50 products.

Instead of opening each product page individually, they can simply click the wishlist icon on products they like and save them instantly.

This creates a faster shopping experience and encourages customers to save more products for future purchases.

To use this feature, please enable it from the dashboard.

<figure><img src="/files/91slDwEEz31dyi5iFJJw" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/kOHcNWHGszWb52A1BIjV" alt=""><figcaption></figcaption></figure>

#### Customization Options

You can fully customize the Collection Wishlist icon and its behavior directly from this section.

**Style Settings**

Customize how the wishlist icon appears:

* Choose different icon styles and themes
* Enable or disable sparkle animation
* Show notifications when products are added to a wishlist
* Customize labels shown before and after adding products

**Example:**

* Add Label: "Add to Wishlist"
* In Wishlist Label: "In Wishlist"

**Position Settings**

Control where the wishlist icon appears on product cards.

Options include:

* Bottom Left
* Bottom Right
* Top Left
* Top Right

You can also adjust:

* Horizontal Offset
* Vertical Offset

This allows precise placement to match your theme layout.

**Icon Settings**

Choose how the wishlist icon looks.

Available options include:

* Heart Icon
* Custom Icon Styles
* Adjustable Icon Size
* Adjustable Stroke Thickness

<figure><img src="/files/hHB3uwwjbJtj4k2Wt9UW" alt=""><figcaption></figcaption></figure>

**Example:**

* Icon Type: Heart
* Size: 18px
* Stroke Thickness: 1px

**Wishlist Count Display**

Enable or disable the wishlist count badge displayed alongside the icon.

This helps customers quickly see how many products they have saved.

<figure><img src="/files/EH6bMNfdlw9MOS4zxAby" alt=""><figcaption></figcaption></figure>

**Advanced Selectors**

For most themes, no changes are required.

However, if the wishlist icon does not appear on collection pages, advanced selectors can be configured.

**Product Card Selectors**

Used to identify product cards within your theme.

Example: .card, .product-card, .grid\_\_item, li.grid\_\_item, .productgrid--item

Only modify this field if the wishlist icon is not displaying correctly.

**Product Link Selectors**

Used by the app to identify product URLs.

a\[href\*="/products/"]

This setting should not be modified, as it is required for the wishlist functionality to work properly.

<figure><img src="/files/F0Ik0ThxLhVmv1UizX3g" alt=""><figcaption></figcaption></figure>

#### How to Enable

1. Click **Enable** on the Collection Wishlist card.
2. Add the required app block to your Shopify theme.
3. Save your theme changes.
4. Configure the icon style, position, labels, and display settings according to your store's branding.
5. Preview your collection pages and verify that the wishlist icon appears correctly.

Once enabled, customers can start saving products directly from collection pages, creating a smoother and more engaging shopping experience.

<figure><img src="/files/D0gfpfRxD3VLc2yVhZWL" alt=""><figcaption></figcaption></figure>

### <mark style="color:$primary;">Floating Wishlist</mark>

**What is it?**

Floating Wishlist adds a persistent wishlist button to your store that remains visible as customers browse different pages.

This allows shoppers to access their wishlist instantly without needing to navigate to a separate page.

**Example**

A customer adds 5 products to their wishlist while browsing your store.

The floating wishlist button displays a counter showing **5 saved items**.

At any time, the customer can click the floating icon and quickly access their wishlist to review saved products.

#### Benefits

* Easy access to the wishlist from any page
* Displays the current wishlist item count
* Encourages customers to revisit saved products
* Improves overall shopping experience

To enable this feature, enable it from the dashboard.

<figure><img src="/files/uEmkWM6QN9yVWTtARcIj" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/dSiTYKriPVhhHqnfhtc2" alt=""><figcaption></figcaption></figure>

#### Customization Options

You can fully customize the appearance, position, and behavior of the floating wishlist button.

**Wishlist Path**

The Wishlist Path determines where customers are redirected when they click the floating wishlist button.

**Default Path:** /apps/wishlist

The default path uses Shopify's App Proxy URL.

If you have created a custom wishlist page, you can update the path accordingly.

**Example:** /pages/my-wishlist

{% hint style="info" %}
If you change the wishlist path, you must manually create and configure the corresponding page in your store.
{% endhint %}

<figure><img src="/files/weGyhMNTF9fn1MKIMuBR" alt=""><figcaption></figcaption></figure>

#### Button Style

Customize the visual appearance of the floating wishlist button.

Available settings include:

* Button Style
* Button Visibility
* Button Size
* Border Thickness
* Border Radius
* Shadow Effects

**Example Settings**

* Style: Solid (Accent Color)
* Visibility: Always Visible
* Button Size: 56px
* Border Thickness: 2px
* Border Radius: 40px
* Show Shadow: Enabled

#### Position Settings

Control where the floating wishlist button appears on your storefront.

Available positions include:

* Bottom Right
* Bottom Left
* Top Right
* Top Left

You can further adjust the placement using:

* Horizontal Offset
* Vertical Offset

**Example Settings**

* Position: Bottom Right
* Horizontal Offset: 10px
* Vertical Offset: 20px

#### Icon Settings

Customize the icon displayed within the floating button.

Available options include:

* Icon Type
* Icon Size
* Stroke Thickness

**Example Settings**

* Icon Type: Heart
* Icon Size: 24px
* Stroke Thickness: 2px

<figure><img src="/files/yz4JXQesHJ7iKDd2vOdV" alt=""><figcaption></figcaption></figure>

#### Wishlist Counter

The counter displays the number of products currently saved in the customer's wishlist.

**Available Settings**

* Show Counter
* Counter Visibility
* Counter Style
* Counter Size
* Counter Border Thickness
* Counter Border Radius
* Counter Horizontal Offset
* Counter Vertical Offset

**Example Settings**

* Show Counter: Enabled
* Counter Visibility: Always Show Counter
* Counter Style: Solid (Accent Color)
* Counter Size: 18px
* Border Thickness: 1px
* Border Radius: 20px
* Horizontal Offset: 0px
* Vertical Offset: -5px

The counter helps customers quickly see how many products they have saved without opening their wishlist.

<figure><img src="/files/2t5aZi9jcjOY13iAhjJO" alt=""><figcaption></figcaption></figure>

#### How to Enable

1. Click **Enable** on the Floating Wishlist card.
2. Configure the Wishlist Path if required.
3. Customize the button style, position, icon, and counter settings.
4. Save your settings.

Once enabled, the Floating Wishlist button will remain visible throughout your store, giving customers instant access to their saved products and improving overall wishlist engagement.

<figure><img src="/files/ICR9RMSvG6uRK82eFN4f" alt=""><figcaption></figcaption></figure>

### <mark style="color:$primary;">Wishlist Page</mark>

**What is it?**

The Wishlist Page is a dedicated page where customers can view and manage all the products they have saved for later. It provides a convenient way for shoppers to revisit their favorite items and complete their purchases when they're ready.

**Example**

Imagine a customer has been browsing your store over the past few weeks and has saved several products to their wishlist.

When they return to your store, they can open the Wishlist Page and see all their saved products in one place. From there, they can:

* Add products directly to their cart
* Remove products they no longer want
* Continue shopping and discover more products
* Share their wishlist with others (optional)
* Clear their entire wishlist (optional)

To enable this feature, enable it from the dashboard.

<figure><img src="/files/fMvqFfLxc5FbWPCjr585" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/hpfAiX3rtWP1qvRDQUNM" alt=""><figcaption></figcaption></figure>

#### Customization Options

You can fully customize the Wishlist Page to match your store's branding and shopping experience.

**General Settings**

* **Heading** – Customize the page title displayed to customers (e.g., "My Wishlist").
* **Page Width** – Control the overall width of the wishlist page.
* **Padding Top & Bottom** – Adjust the spacing around the page content.

**Product Display**

* **Column Width** – Choose how products are displayed within the wishlist.
* **Product Options Style** – Display product variants using dropdown selectors.

**Add to Cart Button**

* **Call to Action Label** – Customize the button text (e.g., "Add to Cart").
* **Call to Action Style** – Select the button design and appearance.

**Discover More Section**

* **Discover More Text** – Customize the text shown to encourage additional shopping.
* **Discover More Link** – Choose where customers are redirected when they click the link (e.g., All Products collection).

<figure><img src="/files/aMYmvwUlI0BcRYyqbUaU" alt=""><figcaption></figcaption></figure>

**Empty Wishlist Settings**

When customers have no saved products, you can customize the message displayed.

Example: Your wishlist is empty.

**Login Message Settings**

For guest visitors, you can display a custom message encouraging them to log in or create an account.

Example: To save your wishlist please login or sign up.

You can customize:

* Login message text
* Login link label
* Sign-up link label

**Share Wishlist**

Allow customers to share their wishlist with friends and family.

Customize:

* Share button visibility
* Share button label
* Share button style

Example: Share Wishlist

**Clear Wishlist**

Allow customers to remove all wishlist items at once.

Customize:

* Clear button visibility
* Clear button label
* Clear button style

Example: Clear Wishlist

**Remove from Wishlist Behavior**

Choose how products are handled after being added to the cart.

Option:

* **Remove product from wishlist when adding to cart** – Automatically removes items from the wishlist once they're added to the shopping cart.

<figure><img src="/files/hcliWGtnw115xybVfQ57" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/mKbNiWUXiOWxopWCysmW" alt=""><figcaption></figcaption></figure>

#### How to Enable

1. Navigate to the **Wishlist Page** section from the Dashboard.
2. Click **Enable**.
3. Configure the desired layout, design, and behavior settings.
4. Save your changes.

Your customized Wishlist Page will now be available to customers across your store.

<figure><img src="/files/W4TZpQreBqaiVDu1u1ti" alt=""><figcaption></figcaption></figure>

### <mark style="color:$primary;">App Settings</mark>

**What is it?**

The App Settings section allows you to customize how Wishy Wishlist looks and behaves across your store. From button styles and colors to notifications and page appearance, you can tailor the wishlist experience to perfectly match your brand.

#### What Can You Customize?

**Wishlist Appearance**

Customize the visual elements of your wishlist components:

* Change wishlist button text
* Customize wishlist icons
* Adjust layouts and styling
* Configure guest wishlist behavior
* Control wishlist page appearance

For example, if your store uses a dark theme, you can update the wishlist colors and button styles to maintain a consistent brand experience.

To enable this feature, enable it from the dashboard.

<figure><img src="/files/Oea5HEaFqPSp9kMOrdiu" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/NfeF6O6PDqPgp0f0yNqf" alt=""><figcaption></figcaption></figure>

#### Color Settings

Control the colors used throughout the wishlist experience.

**Accent Colors**

**Accent 1**

* Used for outlines and solid button backgrounds.

**Accent 2**

* Used for outlines and solid button backgrounds.

**Button Text Colors**

**Solid Button Label**

* Controls the text and icon color displayed on solid buttons.

**Outline Button Label**

* Controls the text and icon color displayed on outline buttons.
* Also used for plain button text.

**Background Colors**

**Background 1**

* Used as the primary background color with Accent 1.

**Background 2**

* Used as the secondary background color with Accent 2.

**Text Color**

**Text**

* Controls text displayed throughout the Wishlist Page and related components.

<figure><img src="/files/Ui4zPPwCpGSW9XHBkjyZ" alt=""><figcaption></figcaption></figure>

#### Notification Settings

Customize the appearance and position of wishlist notifications displayed to customers.

**Available Settings**

* **Position** – Choose where notifications appear on the screen (e.g., Bottom Right).
* **Background Color** – Customize notification background color.
* **Text Color** – Customize notification text color.

**Example**

When a customer adds a product to their wishlist, a notification can appear in the bottom-right corner confirming the action.

<figure><img src="/files/RILl6ihCtGGo26X8OtoU" alt=""><figcaption></figcaption></figure>

#### Button Settings

Customize the appearance of wishlist buttons across your store.

**Available Settings**

* **Button Height**
* **Border Thickness**
* **Border Radius**

**Example**

You can create square buttons with sharp corners or rounded buttons that better match your store's design.

<figure><img src="/files/VIR83vF42GNg5eSNUMas" alt=""><figcaption></figcaption></figure>

#### Input Field Settings

Customize input fields used within wishlist forms and share functionality.

**Available Settings**

* **Input Height**
* **Border Thickness**
* **Border Radius**

This helps ensure consistency between your store theme and wishlist components.

<figure><img src="/files/CUdAkrQkqWmMcUaBqIEU" alt=""><figcaption></figcaption></figure>

#### Shadow Settings

Control the shadow effects used throughout the wishlist interface.

**Available Settings**

* **Opacity**
* **Horizontal Offset**
* **Vertical Offset**
* **Blur**

**Example**

Increase shadow blur and opacity for a more elevated modern appearance, or reduce them for a cleaner minimalist design.

<figure><img src="/files/nkToE2kNSmMLpuVutX39" alt=""><figcaption></figcaption></figure>

#### Visual & Style Settings

Further refine the overall wishlist appearance.

**Font Size Scale**

Adjust the size of text displayed throughout wishlist components.

**Image Aspect Ratio**

Choose how product images are displayed:

* Square (1:1)
* Other supported aspect ratios

**Image Fit**

Select how product images fit within their containers:

* **Cover** – Fills the entire image area while maintaining proportions.
* **Contain** – Displays the full image within the available space.

<figure><img src="/files/V4wpq0lCj6DRFLuvRFc6" alt=""><figcaption></figcaption></figure>

### <mark style="color:$primary;">Code Access</mark>

The **Code Access** app embed is required to enable the **Save for Later** feature on your storefront.

#### Why is Code Access Required?

The Save for Later feature uses Wishy Wishlist scripts to:

* Display the **Save for Later** button in the cart.
* Identify customers and guest visitors.
* Move products from the cart to the wishlist.
* Remove products from the cart after saving.
* Communicate with the Wishy Wishlist backend.

Without Code Access enabled, the Save for Later feature cannot function properly.

<figure><img src="/files/8Po5ojdbAO0bawkfriz7" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/9WZduJvVKIra3XRHscUX" alt=""><figcaption></figcaption></figure>

#### <mark style="color:$primary;">Analytics (Last 30 Days)</mark>

The Analytics section provides a quick overview of how customers are interacting with your wishlist. It helps you understand overall wishlist engagement and track customer interest in your products.

At a glance, you can view:

* **Wishlist Sessions** – Total wishlist interactions during the selected period.
* **New Wishlists (Distinct Shoppers)** – Number of unique customers or visitors who created wishlist items.
* **Saved Items (Add Events)** – Total products added to wishlists.

**Example**

If 50 shoppers save products during the month and collectively add 200 products to their wishlists, these numbers will be reflected in the analytics summary.

For more detailed insights, such as customer activity, product performance, timeline history, and activity source tracking, click **View All Analytics**. These advanced reports are covered in the **Analytics** section of this documentation.

<figure><img src="/files/DAP2sl9dhQsvrWsBaFrS" alt=""><figcaption></figcaption></figure>