quick-start.mdx

title	Wishlist Quick Start
description	Quick reference and getting started guide for the Wishlist drop-in.
sidebar	label order Quick Start 2

import { Aside } from '@astrojs/starlight/components'; import Link from '@components/Link.astro';

The Wishlist drop-in enables customers to save products for later purchase, manage multiple wishlists, and easily move items between wishlists and cart.

Version: 3.1.0

Quick example

The Wishlist drop-in is included in the . This example shows the basic pattern:

// 1. Import initializer (handles all setup)
import '../../scripts/initializers/wishlist.js';

// 2. Import the container you need
import Wishlist from '@dropins/storefront-wishlist/containers/Wishlist.js';

// 3. Import the provider
import { render as provider } from '@dropins/storefront-wishlist/render.js';

// 4. Render in your block
export default async function decorate(block) {
  await provider.render(Wishlist, {
    // Configuration options - see Containers page
  })(block);
}

New to drop-ins? See the Using drop-ins guide for complete step-by-step instructions.

Quick reference

Import paths:

• Initializer: import '../../scripts/initializers/wishlist.js'
• Containers: import ContainerName from '@dropins/storefront-wishlist/containers/ContainerName.js'
• Provider: import { render } from '@dropins/storefront-wishlist/render.js'

Package: @dropins/storefront-wishlist

Version: 3.1.0 (verify compatibility with your Commerce instance)

Example container: Wishlist

Learn more

• Containers - Available UI components and configuration options
• Initialization - Customize initializer settings and data models
• Functions - Control drop-in behavior programmatically
• Events - Listen to and respond to drop-in state changes
• Slots - Extend containers with custom content

{/* This documentation is auto-generated from: git@github.com:adobe-commerce/storefront-wishlist */}