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

Getting started

This guide provides practical steps for creating, running, and customizing your Adobe Commerce storefront using the boilerplate.

Boilerplate version: 4.0.1

Terminology

Commerce drop-in components

Full-featured shopping components that turn websites into storefronts. Drop-in components are not primitive components, like Carousels and Galleries. They provide the entire storefront shopping experience for a website using pages and other commerce features.

Commerce blocks

The integration of Commerce drop-in components into the Edge Delivery Services architecture of JavaScript blocks and document-based authoring. Commerce blocks are the components that provide the content and layout for commerce pages in the storefront.

Content blocks

The Edge Delivery components that provide the content and layout for non-commerce pages in the storefront. These include Cards, Columns, Headers, Footers, and many more. Visit the Adobe Experience Manager Block Collection section for the details.

Creating your storefront

To create a new storefront from the boilerplate, you have two options:

  1. Use the Site Creator Tool (Recommended)
    Visit the Site Creator Tool to quickly set up your own copy of code and content.

  2. Follow the step-by-step guide
    See Create a storefront for a detailed walkthrough of using the GitHub template and configuring your environment.

Running locally

Once you have your storefront repository on your local machine:

npm install    # Install dependencies
npm start      # Start local development server

Your storefront will be running at http://localhost:3000.

Exploring the code

The boilerplate is organized into these main directories:

DirectoryPurpose
blocks/ Commerce & content blocks plus standard AEM blocks (header, footer, cards, and so on)
scripts/ Core functionality - Drop-in initializers, commerce utilities, and Edge Delivery Services runtime
styles/ Global styles - Design tokens, fonts, and deferred styles for performance
tools/ Development tools - PDP metadata generator and Sidekick configuration

Understanding the flow

To understand how documents transform into rendered commerce experiences at runtime, see the Runtime flow section in the architecture guide. This foundational knowledge helps you know where to customize and integrate with the boilerplate.

Customizing your storefront

  • Brand styling - Edit styles/styles.css for design tokens.
  • Block behavior - Modify block decorators in blocks/.
  • Commerce config - Update initializers in scripts/initializers/.
  • Add/remove blocks - Use only the Commerce blocks you need.

Deploying your storefront

Edge Delivery Services automatically builds and deploys when you push changes:

  • Preview: https://<branch>--<repo>--<owner>.aem.page
  • Production: https://<branch>--<repo>--<owner>.aem.live

No manual build step is required—JavaScript bundling, CSS optimization, and asset compression happen automatically.

Keeping your storefront current

Track changes via the Boilerplate Changelog and Release notes. For complete guidance on upgrading drop-in components, applying updates, and handling breaking changes, see the Updates guide.

ResourceDescription
Boilerplate ReferenceComplete technical documentation - All blocks, configuration options, and file structure
Drop-in ComponentsAPI reference for each drop-in component
Commerce Blocks GuideBusiness user guide for using blocks