Skip to content
Adobe Commerce Storefront

Search is only available in production builds. Try building and previewing the site to test it out locally.
The Boilerplate

Overview

The Adobe Commerce boilerplate provides a production-ready foundation for Edge Delivery Services storefronts. This reference covers its architecture, runtime dependencies, and pre-integrated Commerce blocks.

What is a boilerplate?

A boilerplate is a pre-built, production-ready codebase that provides the foundational structure and common functionality for a specific type of application. Instead of starting from scratch, you begin with a proven architecture that includes best practices, integrated tools, and working examples.

Why use a boilerplate?

Boilerplates solve real problems every development team faces when starting a new project:

  • Eliminates setup complexity - Skip weeks of configuration and integration work.
  • Enforces best practices - Benefit from architectural patterns tested across hundreds of projects.
  • Reduces technical debt - Start with clean, maintainable code instead of rushed implementations.
  • Accelerates time-to-market - Focus on your unique features instead of rebuilding common functionality.
  • Provides working examples - Learn by seeing how everything connects in a real application.

Think of a boilerplate like a fully-furnished apartment versus an empty space. Both let you move in, but one lets you start living immediately while the other requires months of work before it’s usable.

What is the Commerce boilerplate?

The Adobe Commerce boilerplate applies this concept specifically to building high-performance Commerce storefronts using Edge Delivery Services. It provides everything needed to launch a complete commerce site without building the complex integrations from scratch.

Why use the Commerce boilerplate for your storefront?

Building a modern commerce storefront from scratch requires integrating multiple systems: a content management system, commerce backend, analytics, search, recommendations, and more. Each integration adds complexity, development time, and potential performance issues. The boilerplate eliminates this complexity by providing:

  • 29 pre-integrated Commerce blocks - Cart, checkout, product pages, search, account management, order tracking, and more work out of the box.
  • Optimized for performance - Edge Delivery Services architecture delivers near-perfect Lighthouse scores (90+) without additional optimization work.
  • Document-based authoring - Business users create and publish pages using familiar tools like Microsoft Word or Google Docs—no developer involvement needed for content changes.
  • Production-ready setup - Commerce API configuration, build tools, analytics integration, and deployment pipelines already configured and tested.

The composable architecture advantage

Unlike traditional commerce platforms that tightly couple content and commerce, the boilerplate uses a composable 4-layer architecture:

  1. Content layer - Authors create pages using simple tables in documents.
  2. Integration layer - 29 Commerce blocks connect documents to commerce functionality.
  3. Component layer - Drop-in components handle cart, checkout, product display, and other commerce features.
  4. Backend layer - Commerce provides product catalog, pricing, inventory, and order management.

This separation means content teams work independently from commerce teams, developers customize without touching the backend, and the storefront delivers content at edge speeds while commerce data loads progressively.

Repository: hlxsites/aem-boilerplate-commerce

Boilerplate version: 4.0.1

Configuration

See the Configuration guide for setup options for your Commerce backend, drop-ins, and site settings.

Runtime dependencies

The boilerplate includes all necessary runtime packages for a complete commerce storefront:

Drop-in component packages

These NPM packages provide the core commerce functionality:

PackagePurpose
@dropins/storefront-cart Shopping cart management and mini-cart display
@dropins/storefront-checkout Complete checkout flow with payment and shipping
@dropins/storefront-pdp Product details pages with variants, images, and add-to-cart
@dropins/storefront-product-discovery Product search, filtering, facets, and listing pages
@dropins/storefront-order Order history, tracking, and confirmation
@dropins/storefront-user-account Customer login, registration, profile, and address management
@dropins/storefront-user-auth Authentication and session management
@dropins/storefront-wishlist Save items for later and wishlist management
@dropins/storefront-recommendations AI-powered product recommendations

Shared utilities and services

PackagePurpose
@dropins/tools Shared utilities for all drop-ins (GraphQL client, event bus, initializers, UI components)
@adobe/adobe-client-data-layer Standardized data layer for event collection and analytics
@adobe/magento-storefront-event-collector Collects Commerce-specific user interaction events
@adobe/magento-storefront-events-sdk SDK for sending events to Commerce for Live Search and Product Recommendations

Commerce blocks

The boilerplate includes 29 Commerce blocks that integrate drop-in components with Edge Delivery Services. See the Blocks reference for a complete reference with drop-in integrations and key features.