Wishlist Configuration

The Settings tab in GP ‑ Wishlist & Upsell Suite gives you complete control over how your wishlist looks and behaves. This guide walks you through every customization option to help you create a wishlist experience that matches your brand.

Accessing Wishlist Settings

  1. Open GP ‑ Wishlist & Upsell Suite from your Shopify admin
  2. Click Wishlist in the navigation menu
  3. Select the Settings tab
Wishlist Settings Page

Product Page Button Settings

This section controls the main “Add to Wishlist” button that appears on your product pages.

Product Page Button Settings

Text Settings

SettingDescriptionExample
Button TextText shown before clicking“Add to Wishlist”
Button Text After ClickText shown after adding to wishlist“Added to Wishlist”
Font SizeButton text size in pixels14px

Layout Settings

SettingOptionsDescription
Border Radius0-30px sliderControls button corner roundness
Button WidthAuto / Full WidthAuto fits content; Full Width spans container
Icon DisplayShow / HideToggle the wishlist icon visibility

Icon Selection

When icons are enabled, choose from 6 icon styles:

  • Heart — Classic filled heart (default)
  • Star — Five-pointed star
  • Plus — Simple plus sign
  • Flag — Flag marker
  • Circle Down — Downward arrow in circle
  • Circle Up — Upward arrow in circle
Icon Selection Options

Color Customization

SettingDescription
Button Text ColorColor of the button text
Button Background ColorFill color of the button
Button Border ColorOutline color of the button
Color Picker

Tip: Use the live preview on the right side of the settings page to see your changes in real-time before saving.

Live Preview Panel

Collection Page Button Settings

This section controls the small heart icon that appears on product cards in collection/listing pages.

Note: This is a Pro feature. Free plan users will see an upgrade banner.

Collection Page Button Settings

Button Styling

SettingDescription
Button ColorColor of the heart icon
Button Background ColorBackground fill behind the icon
Button AlignmentLeft or Right position on product cards
Display ButtonShow or Hide the button

Theme Compatibility

The collection page button works automatically with these Shopify themes:

  • Dawn
  • Sense
  • Fresh
  • Craft
  • Ride
  • Studio
  • Publisher
  • Crave

Custom Class Name

For themes not listed above, you can specify a custom CSS class name:

  1. Enable Use Custom Class Name
  2. Enter the class name of your theme’s product card container
  3. The wishlist button will be injected into elements matching that class
Custom Class Name Setting

Tip: Inspect your theme’s product cards using browser developer tools to find the correct class name.


Collection Page Banner Settings

Display a promotional banner on collection pages to highlight your wishlist feature.

Collection Page Banner Settings
SettingDescription
Show BannerEnable/disable the collection banner
Banner TextCustom message to display
Banner Background ColorBackground color of the banner
Banner Text ColorText color of the banner message

Example banner text: “Save your favorite items to your wishlist!”

Collection Banner on Storefront

Move to Cart Button Settings

Customize the buttons that move wishlist items to the shopping cart.

Move to Cart Button Settings

Text Labels

SettingDescriptionDefault
Move to Cart TextSingle item button“Move to Cart”
Add to Cart TextAlternative label“Add to Cart”
Move All to Cart TextBulk action button“Move All to Cart”

Styling Options

SettingDescription
Font SizeText size in pixels
Border RadiusCorner roundness (0-30px)
Icon DisplayShow/hide cart icon
Text ColorButton text color
Background ColorButton fill color
Border ColorButton outline color

Share Wishlist Button Settings

Allow customers to share their wishlists with friends and family.

Share Wishlist Button Settings

Customization Options

SettingDescription
Button TextLabel for the share button
Font SizeText size in pixels
Border RadiusCorner roundness
Icon DisplayShow/hide share icon
Text ColorButton text color
Background ColorButton fill color
Border ColorButton outline color

Sold Out Button Settings

Customize how sold-out items appear in the wishlist.

Sold Out Button Settings
SettingDescription
Button TextText shown for unavailable items
Font SizeText size in pixels
Border RadiusCorner roundness
Text ColorLabel text color
Background ColorButton fill color
Border ColorButton outline color

Contact Us Button Settings

Add an optional “Contact Us” button to the wishlist page for customer inquiries.

Contact Us Button Settings

Configuration

SettingDescription
Show Contact UsEnable/disable the button
Contact Us Page LinkURL to your contact page
Button TextLabel for the button
Font SizeText size in pixels
Border RadiusCorner roundness
Text ColorButton text color
Background ColorButton fill color
Border ColorButton outline color

Use Case: Enable this if you sell custom or made-to-order products and want customers to inquire about wishlist items.


Additional Settings

Custom Wishlist Page URL

By default, the wishlist page is accessible at /pages/wishlist. You can customize this:

  1. Enable Use Custom Wishlist Page
  2. Enter your preferred URL handle (e.g., my-favorites)
  3. The wishlist will now be at /pages/my-favorites
Custom Wishlist Page URL

Navigation Wishlist Button

Control the wishlist icon in your store’s header/navigation:

OptionDescription
ShowDisplay wishlist icon in navigation
HideRemove wishlist icon from navigation
Navigation Wishlist Button Setting

Action Messages

Customize all the text messages customers see when interacting with the wishlist.

Action Messages Section

Notification Messages

MessagePurposeExample
Notification on AddShown when item is added“Added to wishlist!”
Notification on RemoveShown when item is removed“Removed from wishlist”
Item AddedConfirmation message“Item added successfully”

Authentication Messages

MessagePurpose
Sign In ButtonLogin button text
Sign Up ButtonRegistration button text
Login MessagePrompt to log in
Create Account MessagePrompt to register
Browsing as GuestGuest mode indicator

Wishlist Page Content

MessagePurpose
Page Not Found TextEmpty wishlist message
Page Not Logged In TextGuest/logged out message
Item UnavailableOut of stock indicator
Shared Wishlist ViewViewing shared wishlist text
Shared Wishlist ErrorError loading shared wishlist

Sharing Features

MessagePurpose
Share ErrorFailed to generate share link
Share Link CopyLink copied confirmation
Share MessageDefault share message text
Shared Wishlist ExpiredExpired share link message

Cart Actions

MessagePurpose
Move to Cart ErrorFailed to add to cart
Remove Product ErrorFailed to remove item
Variant Option Select ErrorMissing variant selection
Add to Cart ErrorGeneral cart error

Best Practices

Brand Consistency

  1. Match your theme colors — Use your brand’s primary and secondary colors for buttons
  2. Consistent typography — Keep font sizes similar to your theme’s button styles
  3. Icon style — Choose an icon that matches your store’s aesthetic

User Experience

  1. Clear button text — Use action-oriented labels like “Save to Wishlist”
  2. Visible feedback — Ensure “after click” text is noticeably different
  3. Mobile-friendly sizing — Test button sizes on mobile devices

Messaging

  1. Friendly tone — Keep messages warm and helpful
  2. Clear error messages — Help users understand what went wrong
  3. Encourage action — Use messages that prompt next steps

Saving Your Changes

After making changes:

  1. Click the Save button in the top-right corner
  2. Wait for the confirmation toast message
  3. Visit your storefront to verify changes
Save Button and Toast

Note: If you navigate away without saving, you’ll see a confirmation dialog to prevent losing changes.


What’s Next?

Now that your wishlist is styled, set up automated customer engagement:


A well-designed wishlist keeps customers engaged and coming back to complete their purchases.

Last updated on February 22, 2026

Was this article helpful?

PREVIOUS

Wishlist Price Drop Notifications

Powered by Support Genix