wishlist-save-for-later（心愿单 保存以供日后使用）

Wishlist / Save for Later

Overview

Implement persistent wishlists that survive browser sessions for both authenticated and guest users. Includes shareable wishlist links, back-in-stock email alerts for out-of-stock wishlist items, and move-to-cart flows. Guest wishlists stored in localStorage are merged with the server-side list on login.

When to Use This Skill

• When shoppers want to save items for future purchase but are not ready to buy
• When building a feature to reduce cart abandonment by offering "save for later" on cart items
• When implementing back-in-stock notifications for high-demand products
• When the brand's social/sharing strategy should include wishlist sharing

Core Instructions

Step 1: Determine the merchant's platform and choose the right approach

Step 2: Set up wishlists on your platform

Shopify

Wishlist Plus (recommended — free tier available):

1. Install Wishlist Plus from the Shopify App Store
2. In the app dashboard:

- Set Guest wishlist: Enabled (uses browser storage for logged-out users) - Set Auto-merge: Enabled (merges guest wishlist into account wishlist on login) - Configure the heart button position: Above add to cart, Below add to cart, or On product image

1. The app automatically adds a heart/wishlist button to all product pages and collection cards
2. Configure Wishlist page URL (default: /pages/wishlist) in the app settings
3. Enable Email reminders: sends a reminder email when wishlist items go on sale or come back in stock
4. Add the wishlist link to your navigation:

- Go to Online Store → Navigation → Main menu - Add a link pointing to /pages/wishlist

Back-in-stock alerts:

• Wishlist Plus sends automatic back-in-stock emails when inventory is restored
• Configure the email template and timing in Wishlist Plus → Email Settings

WooCommerce

YITH WooCommerce Wishlist (free):

1. Install and activate from WordPress.org
2. Go to YITH → Wishlist → Settings → General:

- Set Wishlist page: create a new page with the [yith_wcwl_wishlist] shortcode, then select it - Enable Share wishlist: lets customers share a public URL to their wishlist - Enable Move to cart: shows a "Move to Cart" button on the wishlist page - Configure Add to Wishlist button position: under Add to Cart, or via shortcode/widget

1. Under YITH → Wishlist → Settings → Guest Users:

- Enable Allow guests to use wishlist: stores in session/cookie - Set Redirect after login: redirect to wishlist page so guest list merges automatically

1. The plugin creates a customer-specific wishlist page at /wishlist/?token=[user-token] for sharing

Back-in-stock with YITH:

• Install the companion plugin YITH WooCommerce Back In Stock Notifications (free)
• When a wishlist item goes out of stock, customers see an "Email me when available" option
• Configure the notification email template in the plugin settings

BigCommerce

Built-in Wishlists:

1. Wishlists are available to logged-in customers in their Account → Wishlists section
2. Customers can create multiple named wishlists (Birthday, Home, etc.)
3. To add "Add to Wishlist" buttons to product pages in Cornerstone:

- Go to Storefront → My Themes → Customize - In Product Page, enable the Add to Wishlist button if not already visible

1. Shared wishlists: customers can set individual wishlists to Public in their account and share the URL

For guest wishlists: BigCommerce's built-in wishlist requires login. Install Wishlist Plus from the BigCommerce App Marketplace for guest wishlist support.

Custom / Headless

localStorage guest wishlist:

// lib/wishlistStore.js
const KEY = 'guest_wishlist';

export function getGuestWishlist() {
  try { return JSON.parse(localStorage.getItem(KEY) ?? '[]'); } catch { return []; }
}

export function toggleGuestWishlist(item) {
  const items = getGuestWishlist();
  const exists = items.some(i => i.variantId === item.variantId);
  const updated = exists
    ? items.filter(i => i.variantId !== item.variantId)
    : [...items, { ...item, addedAt: Date.now() }];
  try { localStorage.setItem(KEY, JSON.stringify(updated)); } catch {}
  return updated;
}

Merge guest wishlist on login:

export async function mergeGuestWishlistOnLogin() {
  const guestItems = getGuestWishlist();
  if (guestItems.length === 0) return;
  await fetch('/api/wishlist/merge', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items: guestItems }),
  });
  localStorage.removeItem('guest_wishlist');
}

// Server: POST /api/wishlist/merge
// Insert only items not already in the user's server wishlist

Heart button component:

function WishlistButton({ product, variant }) {
  const { toggle, isWishlisted } = useWishlist();
  const wishlisted = isWishlisted(variant.id);
  return (
    <button
      onClick={() => toggle({ productId: product.id, variantId: variant.id })}
      aria-label={wishlisted ? `Remove ${product.name} from wishlist` : `Add ${product.name} to wishlist`}
      aria-pressed={wishlisted}
      className={`wishlist-btn ${wishlisted ? 'active' : ''}`}>
      <svg aria-hidden="true" viewBox="0 0 24 24"
        fill={wishlisted ? 'currentColor' : 'none'} stroke="currentColor">
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
      </svg>
    </button>
  );
}

Back-in-stock notification trigger (run on inventory webhook or cron):

async function notifyBackInStock(variantId) {
  const subscribers = await db.backInStockSubscriptions.findMany({
    where: { variantId, notifiedAt: null },
  });
  for (const sub of subscribers) {
    await emailService.send({
      to: sub.email,
      template: 'back-in-stock',
      data: { productName: sub.productName, productUrl: sub.productUrl },
    });
    await db.backInStockSubscriptions.update({
      where: { id: sub.id }, data: { notifiedAt: new Date() },
    });
  }
}

Best Practices

• Optimistic UI for toggle — update the heart icon immediately on click; revert on API error to avoid perceived sluggishness
• Merge guest wishlists on login — nothing frustrates shoppers more than losing saved items after signing in
• Rate-limit back-in-stock emails — send at most one notification per subscriber per variant per restock event
• Show wishlist count in the header — a small badge count reinforces engagement
• Allow move-to-cart from wishlist — provide a "Move to Cart" button that adds the item and removes it from the wishlist atomically
• Expire guest wishlists — clear localStorage entries older than 90 days to avoid showing discontinued products

Common Pitfalls

Related Skills

• @recently-viewed-products
• @product-page-design
• @cart-abandonment-recovery
• @accessibility-commerce