How to Add a Wishlist to Your Shopify Store

A wishlist is one of the most requested features by Shopify merchants, and for good reason. It lets customers bookmark products they are interested in but not ready to buy, creating a natural pathway back to your store. Wishlists also generate valuable data about product interest that you can use to inform your marketing, merchandising, and inventory decisions.

Despite being a standard feature on most major ecommerce platforms, Shopify does not include native wishlist functionality out of the box. You need to add it through an app, custom code, or a combination of both. This guide covers all three approaches, helps you choose the right one for your store, and shows you how to maximise the value of your wishlist data.

If you are also working on improving your overall store experience, our guide on improving product page conversions pairs well with wishlist implementation.

Why wishlists matter for ecommerce

Wishlists serve multiple strategic purposes beyond simply letting customers save products. Understanding these benefits helps you prioritise the feature and design it effectively.

Driving repeat visits

A customer who saves items to a wishlist has an explicit reason to return to your store. Unlike a generic "come back and browse" message, a wishlist reminder says "the items you liked are still available" — a much more compelling reason to click. Stores with wishlists typically see higher return visitor rates and shorter purchase consideration cycles.

Purchase intent data

Every wishlist addition is a signal of purchase intent. This data tells you which products are generating interest but not converting immediately. Are customers wishlisting items that are too expensive? Out of their size? Waiting for a sale? This information is gold for your merchandising and pricing strategy.

Email marketing opportunities

Wishlists create natural triggers for email marketing automation. Price drop alerts, low stock notifications, and wishlist reminder emails are among the highest-converting email types in ecommerce. They work because the customer has already expressed interest — you are simply removing the last barrier to purchase.

Social sharing and gifting

Shareable wishlists let customers share their favourites with friends and family, particularly valuable during gift-giving seasons. This turns your wishlist into a customer acquisition tool, as gift-givers visit your store for the first time through a shared wishlist link.

How wishlists work on Shopify

Since Shopify does not have a native wishlist feature, any implementation needs to solve two fundamental problems: where to store the wishlist data, and how to display it to the customer.

Storage options

• Browser localStorage. The simplest approach. Wishlist data is stored in the customer's browser. Fast, no server calls needed, but the wishlist is lost if the customer clears their browser data or switches devices.
• Customer metafields. Store wishlist data against the customer record in Shopify. Requires the customer to be logged in, but the wishlist persists across devices and sessions.
• App backend. Third-party apps typically use their own servers to store wishlist data. Most flexible but adds a dependency on the app provider.
• Shopify customer account API. Newer approach using Shopify's customer account extensions. Most integrated but requires more development effort.

Display requirements

At minimum, you need a way to toggle items on and off the wishlist (typically a heart icon), a visual indicator of wishlisted items, and a dedicated page where customers can view and manage their saved items. Optionally, you might add wishlist counts in the header, quick-add-to-cart from the wishlist page, and sharing functionality.

Method 1: Using a wishlist app

For most stores, a wishlist app is the fastest and most practical solution. Several well-maintained apps are available in the Shopify App Store, each with different feature sets and pricing.

Top wishlist apps to consider

• Wishlist Plus by Swym. One of the most established options. Supports guest wishlists, email reminders, analytics, and social sharing. Has a free tier for smaller stores and paid plans for advanced features.
• Wishlist Hero. Lightweight option focused on simplicity and speed. Good for stores that want basic wishlist functionality without the overhead of a full-featured solution.
• Growave. All-in-one platform that includes wishlists alongside reviews, loyalty, and social proof. Good if you need multiple features and want to consolidate apps.

Installation and setup

1. Install the app from the Shopify App Store
2. Configure the wishlist icon style and placement in the app settings
3. Enable the app's theme integration — most apps use automatic injection or provide a Liquid snippet
4. Customise the wishlist page design to match your theme
5. Set up email notifications if the app supports them
6. Test on both desktop and mobile across multiple browsers

Before installing any app, review our guide on auditing your app stack to ensure you are not adding unnecessary bloat or conflicts.

Method 2: Custom Liquid and JavaScript

For stores that want full control over the wishlist experience without app dependencies, a custom build using Liquid, JavaScript, and localStorage provides a lightweight, performant solution.

The JavaScript wishlist manager

class WishlistManager {
  constructor() {
    this.storageKey = 'shopify_wishlist';
    this.items = JSON.parse(localStorage.getItem(this.storageKey) || '[]');
  }

  toggle(productId) {
    const index = this.items.indexOf(productId);
    if (index > -1) {
      this.items.splice(index, 1);
    } else {
      this.items.push(productId);
    }
    localStorage.setItem(this.storageKey, JSON.stringify(this.items));
    this.updateUI();
    return this.has(productId);
  }

  has(productId) {
    return this.items.includes(productId);
  }

  getAll() {
    return this.items;
  }

  updateUI() {
    // Update heart icons across the page
    document.querySelectorAll('[data-wishlist-toggle]').forEach(btn => {
      const id = parseInt(btn.dataset.productId);
      btn.classList.toggle('wishlisted', this.has(id));
      btn.setAttribute('aria-pressed', String(this.has(id)));
    });
    // Update counter
    const counter = document.querySelector('[data-wishlist-count]');
    if (counter) counter.textContent = this.items.length;
  }
}

Adding the heart icon to your theme

Add the wishlist toggle button to your product card snippet (typically card-product.liquid or similar). The button uses a data attribute to identify the product and the JavaScript class handles the toggle logic and visual state.

This approach keeps your store fast because there are no external API calls, no app scripts loading, and the data persists in the browser. The limitation is that wishlists do not sync across devices and are lost if the customer clears their browser storage.

Method 3: Customer metafields approach

For persistent, cross-device wishlists without an app, you can store wishlist data in customer metafields using the Shopify Storefront API. This requires customers to be logged in but provides a seamless experience across all their devices.

How it works

1. Define a customer metafield namespace (e.g., custom.wishlist) with a JSON type
2. When a customer adds an item to their wishlist, use the Storefront API to update their metafield
3. When loading the wishlist page, read the metafield data and fetch the corresponding products
4. For guests, fall back to localStorage and offer to save their wishlist when they create an account

This is the most technically demanding approach but provides the best customer experience. For help implementing it, our Shopify development team can build a custom wishlist solution tailored to your store's needs. Learn more about metafields in our metafields setup guide.

Designing the wishlist UI

The wishlist user interface needs to be intuitive, accessible, and consistent with your store's design language. Get these elements right.

The toggle icon

Use a heart icon — it is universally understood as "favourite" or "save for later". Show an outlined heart for unsaved items and a filled heart for saved items. The transition between states should be smooth (a CSS transition on fill colour works well) and provide immediate visual feedback.

Placement on product cards

Position the heart icon in the top-right corner of product card images. This is the convention customers expect. Make sure it is large enough to tap easily on mobile (at least 44x44 pixels for the touch target) and has sufficient contrast against the product image.

Accessibility

Use aria-pressed to indicate the toggle state. Add aria-label text that describes the action: "Add to wishlist" or "Remove from wishlist". Ensure the heart icon is keyboard-focusable and operable with Enter or Space keys.

Adding the heart icon to product cards

Here is the CSS for a polished wishlist heart icon that works across all modern browsers and provides clear visual feedback for both states.

.wishlist-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
  z-index: 2;
}

.wishlist-btn:hover {
  transform: scale(1.1);
  background: #fff;
}

.wishlist-btn svg {
  width: 20px;
  height: 20px;
  stroke: #333;
  fill: transparent;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

.wishlist-btn.wishlisted svg {
  fill: #e74c3c;
  stroke: #e74c3c;
}

Creating a dedicated wishlist page

The wishlist page is where customers review their saved items and decide what to purchase. Design it as a mini collection page with product images, titles, prices, and add-to-cart buttons. Include the ability to remove items individually and a "clear all" option.

For the localStorage approach, you will need to fetch product data via the Storefront API or AJAX Product API using the saved product IDs. Display a helpful message if the wishlist is empty, with a prominent link back to your collections.

Integrating wishlists with email marketing

The real power of wishlists emerges when you connect them to your email marketing platform. With Klaviyo integration, you can trigger automated emails based on wishlist activity.

Key wishlist email flows

• Price drop alert. Notify customers when a wishlisted item goes on sale. This is one of the highest-converting email types in ecommerce.
• Low stock alert. Create urgency by telling customers their wishlisted item is running low. Only send this when stock genuinely is limited.
• Wishlist reminder. After 7-14 days, remind customers about their saved items. Include product images and a direct link to the wishlist page.
• Back in stock. If a wishlisted item was out of stock and returns, notify the customer immediately. Combine this with your back-in-stock notification system.

Combining wishlists with back-in-stock alerts

Wishlists and back-in-stock alerts are natural companions. When a customer wishlists an out-of-stock product, they are expressing strong purchase intent. Automatically enrolling them in a back-in-stock notification for that product creates a seamless experience and captures a sale that might otherwise be lost.

Most wishlist apps can integrate with back-in-stock notification apps, or you can build this logic into a custom implementation using Shopify webhooks that trigger when inventory levels change.

Tracking wishlist engagement

Wishlist data is a goldmine for understanding customer behaviour. Here are the key metrics to track and what they tell you.

• Wishlist-to-cart rate. What percentage of wishlisted items eventually get added to cart? Low rates might indicate pricing issues or that customers are using the wishlist as a comparison tool.
• Most wishlisted products. Which products generate the most wishlist additions? These are your most desired items — make sure they are well-stocked and prominently featured.
• Wishlist conversion rate. What percentage of customers who use the wishlist eventually make a purchase? Compare this to your overall conversion rate to understand the wishlist's impact.
• Time from wishlist to purchase. How long does it take for wishlisted items to convert? This tells you about your customers' purchase consideration cycle.
• Wishlist email performance. Track open rates, click rates, and conversion rates for wishlist-triggered emails to optimise your messaging and timing.

For comprehensive tracking, see our Shopify analytics setup guide.

Wishlist best practices

Keep it simple

A wishlist should be a one-click action. Do not require account creation to use the wishlist — let guests save items with localStorage and prompt them to create an account to save their wishlist permanently. The moment you add friction to the wishlist action, usage drops dramatically.

Show the count

Display the wishlist item count in your header, next to or near the cart icon. This serves as a constant reminder that the customer has saved items and creates a natural click target to return to the wishlist page.

Make it shareable

Add sharing functionality so customers can send their wishlist to friends and family. This is particularly valuable during gift-giving seasons and effectively turns your wishlist into a customer acquisition channel.

Mobile optimisation

Ensure the heart icon is large enough to tap accurately on mobile. Position it where thumbs can easily reach it. The wishlist page should be fully responsive with product images, prices, and add-to-cart buttons that work perfectly on small screens. Test thoroughly on actual mobile devices, not just browser emulation.

Performance

If using an app, check its impact on your store speed. Wishlist apps that load large JavaScript bundles or make multiple API calls on every page load can significantly impact your Core Web Vitals scores. Choose lightweight solutions and defer non-critical scripts.

A wishlist is not just a convenience feature — it is a retention and remarketing tool. Every wishlisted item is a customer telling you exactly what they want to buy. The stores that turn that signal into targeted, timely communication are the ones that see the highest conversion rates from their wishlist feature.

Andrew Simpson, Founder

---

Adding a wishlist to your Shopify store gives customers a reason to return and gives you valuable data about purchase intent. Whether you choose an app for speed, a custom build for control, or a metafields approach for persistence, the key is making the feature frictionless and connecting it to your marketing automation.

If you need help implementing a custom wishlist solution or integrating it with your email marketing flows, get in touch. We can build a wishlist system that drives real revenue for your store.