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:
App Status
Analytics (Last 30 Days)
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.
Product Wishlist
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.
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
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.
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
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.
How to Enable
Click Add App Block.
Shopify Theme Editor will open.
Add the Wishy Wishlist Product block to your product page.
Save your theme.
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.
Collection Wishlist
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.
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
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.
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.
How to Enable
Click Enable on the Collection Wishlist card.
Add the required app block to your Shopify theme.
Save your theme changes.
Configure the icon style, position, labels, and display settings according to your store's branding.
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.
Floating Wishlist
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.
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
If you change the wishlist path, you must manually create and configure the corresponding page in your store.
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
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.
How to Enable
Click Enable on the Floating Wishlist card.
Configure the Wishlist Path if required.
Customize the button style, position, icon, and counter settings.
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.
Wishlist Page
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.
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).
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.
How to Enable
Navigate to the Wishlist Page section from the Dashboard.
Click Enable.
Configure the desired layout, design, and behavior settings.
Save your changes.
Your customized Wishlist Page will now be available to customers across your store.
App Settings
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.
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.
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.
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.
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.
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.
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.
Code Access
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.
Analytics (Last 30 Days)
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.
Last updated