ecommerce pattern

Wishlist

Saved products for later purchase.

When to use it

Account → Wishlist or hearted-products view.

  • Move-to-cart in 1 tap
  • Share wishlist via link

Layout regions

  • header
  • main
  • toolbar

States

  • default
  • empty

Example

<Container><h1>Wishlist</h1><Grid variant="auto" min="240px">{items.map((p) => <WishlistTile key={p.id} {...p} />)}</Grid></Container>

The full Wishlist pattern specifies 3 exact microcopy strings, 1 motion spec, 3 composition rules — all gated behind the full recipe. Get the full recipe.

Build the Wishlist pattern in your project.