Getting started

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

Boilerplate version: 4.0.1

Boilerplate Overview

For conceptual information about what the boilerplate is and why to use it, see the Boilerplate Overview.

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. Content can be authored using document-based tools (DA.live, Google Docs, SharePoint), in-context editing (Universal Editor, Storefront Builder), or AEM Sites 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 Storefront Setup 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:

Directory	Purpose
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

Understanding the flow

To learn how documents become rendered commerce experiences at runtime, see the How it works section in the architecture guide. This foundational knowledge helps you identify how 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.

Related resources

Resource	Description
Boilerplate Reference	Complete technical documentation - All blocks, configuration options, and file structure
Drop-in Components	API reference for each drop-in component
Commerce Blocks Guide	Business user guide for using blocks