User Account Quick Start

The User Account drop-in provides a complete customer account management experience with containers for viewing orders, managing addresses and stored payment methods, updating personal information, and changing passwords.

Quick example

The User Account drop-in is included in the Commerce boilerplate . This example shows the basic pattern:

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

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

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

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

New to drop-ins? See the Connect a drop-in guide for complete step-by-step instructions.

Quick reference

Import paths:

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

Package: @dropins/storefront-account

Example container: AddressForm

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