Cart Quick Start

The Cart drop-in is one of the most commonly used components in the Commerce boilerplate. It provides a complete shopping cart experience with features like product management, coupon codes, gift cards, and shipping estimates.

Version: 1.5.1

New to drop-ins? Start with the Using drop-ins tutorial for step-by-step guidance.

Need to customize? See the Initialization page for advanced configuration options.

Getting started

The Cart drop-in is included in the Commerce boilerplate —no installation needed. For complete instructions on importing and using drop-ins in your blocks, see the Using drop-ins guide.

Quick reference

Import paths:

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

Package information:

• Package: @dropins/storefront-cart
• Version: 1.5.1 (verify compatibility with your Commerce instance)
• Example container: CartSummaryGrid

Example in boilerplate

The boilerplate includes working examples that use the Cart drop-in. Look for blocks with names like commerce-cart (for example, commerce-cart, commerce-checkout) in the blocks/ directory.

Start with working code

Before creating a new block, review existing blocks in the boilerplate repository to see how they import and configure the Cart drop-in. You can copy and adapt these patterns for your needs.

Quick example

This example shows the basic pattern for using the Cart drop-in. For complete details and advanced patterns, see the Using drop-ins guide.

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

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

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

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

Tip

For container-specific configuration options and examples, see the Containers page. To customize the initializer, see the Initialization page.

Next steps

Now that you understand the basics, explore these resources:

• Using drop-ins - Complete guide with examples and patterns.
• Containers - Available UI components and their configuration options.
• Initialization - Customize initializer settings and data models.
• API functions - Control drop-in behavior programmatically.
• Slots - Extend containers with custom content.
• Events - Listen to and respond to drop-in state changes.