Prerequisites
Gather the accounts, permissions, and Commerce access needed to create a new storefront project, whether you use Site CreatorApp in Document Author (DA.live) that creates and initializes a storefront by setting up content, optional code, theme choice, and storefront configuration values. or the manual GitHub path. As you prepare, use the table’s references for help with unfamiliar tools or access requirements.
For an existing project, go straight to Run your storefront locally, since you do not need to repeat repository creation or backend setup.
You should be comfortable with JavaScript, HTML, CSS, and basic npm workflows, but you do not need prior knowledge of Adobe Commerce, PHP, or React.
What you need
Section titled “What you need”Your storefront uses Edge Delivery ServicesAdobe's hosting and delivery infrastructure that turns authored documents into fast HTML pages served from servers close to the shopper. You push code to GitHub; Edge Delivery Services builds and publishes automatically. (EDS), Adobe’s hosting and delivery layer, to turn authored documents into fast HTML pages. To build and deploy it, you’ll need the accounts, tools, and Commerce access listed below.
| What | Why you need it | How to get it |
|---|---|---|
| Adobe ID | Document Author (DA.live) and other Adobe experiences in this workflow expect you to sign in with an Adobe ID. | Open Adobe.com , then use the account menu in the header to sign in or create an Adobe ID. |
| GitHub account | Site Creator creates or links a GitHub repository for your storefront code. | Sign up for GitHub (personal or enterprise). |
| Document Author (DA.live) access | Site Creator creates your starter content in DA.live. This applies to the default Document Authoring path. If your project uses AEM Sites as the content source, DA.live access is not required. | Open DA.live and sign in with the Adobe ID from the first row. For workspace and authoring concepts, see Document Authoring documentation . If your organization uses enterprise access, ask your admin for an invitation. |
| Commerce backend services | A drop-in componentNPM packages that provide core Commerce storefront features such as cart, checkout, product details, and account flows. is a ready-made Commerce user interface package for cart, checkout, account, or product pages. Confirm which services supply catalog data and which platform handles shopping operations before configuring the storefront. | See Backend options for Adobe Commerce as a Cloud Service or Adobe Commerce Optimizer with an existing commerce platform. |
| Commerce Admin access and API values | Site Creator can read from your Commerce APIs when they are reachable. After the repo exists, Storefront configuration asks for base URLs, GraphQL endpoints (Commerce’s query language for reading and writing data), and credentials for a headless storefront (the storefront UI runs in the shopper’s browser, not on the Commerce server). The exact fields depend on your backend. | Work with your Commerce administrator or solution partner to gather values before you paste them into tools. Backend options lists services and limits per platform. When you have API access and a repository, the config generator tool in DA.live can build a starter storefront configuration from your inputs. Use Storefront configuration to learn what each field means. |
| Node.js | You need Node.js when you run your storefront locally. For a new setup based on the current template, use Node.js 24 LTS, matching the template’s main validation workflow. Follow your team’s version requirement for an existing project. | Install Node.js from Download Node.js , then run node -v to confirm. |
| npm | The Commerce boilerplate on GitHub uses npmNode's package manager. You use it to install drop-in packages — for example, `npm install @dropins/storefront-cart` — in your storefront repository. (Node’s package manager) for installs and scripts (npm install, npm run install:dropins, npm start). npm ships with Node.js. | Run npm -v in a terminal after you install Node.js. |
| AEM CLI | The storefront’s start script runs aem up, the Adobe Experience Manager command-line interface for local preview. | The current template includes the CLI as a project dependency. Follow Run your storefront locally to install dependencies and start the preview. A separate global installation is not required. See AEM CLI documentation for other uses. |
| Git | Cloning and pushing to your repository requires Git. | Download Git , or run git --version to check if it is already installed. |
Extra steps for some teams
Section titled “Extra steps for some teams”Your backend and organization policies determine which extra setup applies. If you need to identify your backend, Backend options explains the available types and their requirements.
For Adobe Commerce as a Cloud Service, Adobe manages the platform packages and hosted services, but your team still configures the storefront connection. With Adobe Commerce Optimizer, setup also depends on the existing platform that handles cart, checkout, and accounts.
Commerce PaaS backends
Section titled “Commerce PaaS backends”If shopping operations use Adobe Commerce on Cloud or on-premises, complete the Commerce prerequisites even when Adobe Commerce Optimizer supplies the catalog experience. Site Creator or the manual GitHub path creates the storefront project; it does not replace setup on that Commerce deployment.
Finish the PaaS: required packages and services checklist for the transactional APIs and catalog path your project uses. The Storefront Compatibility package runs on the Adobe Commerce deployment. For catalog synchronization into Adobe Commerce Optimizer, follow the separate connector requirements in Backend options.
Until the required Commerce-side setup is complete, catalog or shopping checks can fail even when the storefront content loads. Adobe managing Adobe Commerce Optimizer does not mean that Adobe also configures your existing transactional platform.
Using drop-in components requires a license that covers drop-ins: Adobe Commerce as a Cloud Service, Adobe Commerce Optimizer, or Commerce PaaS with Adobe Commerce Optimizer added. Read Licensing requirements for who can use drop-ins and how access works. If your backend type is Commerce PaaS as defined on Backend options, confirm your situation against both topics before you invest in drop-in work.
Adobe Commerce Optimizer with a third-party platform
Section titled “Adobe Commerce Optimizer with a third-party platform”Identify who owns the cart, checkout, and account integration for the existing platform. Adobe Commerce Optimizer provides catalog and product-discovery services, not a replacement for those transactional APIs. Confirm the integration requirements before treating the storefront as a complete shopping experience.
Site Creator, manual GitHub setup, and enterprise policies
Section titled “Site Creator, manual GitHub setup, and enterprise policies”Site Creator walks you through the repository and starter content in the browser. To create the repository separately, start from the Commerce boilerplate template on GitHub and install the AEM Code Sync app on that repository. Code Sync redeploys your storefront when you push to main and connects Edge Delivery Services to your repo. Follow Step-by-step setup for the full GitHub and Code Sync sequence.
The manual path still uses Site Creator’s existing-code-repository option to provision starter content. Plan time for repository and GitHub App approvals. If your organization does not allow Site Creator, confirm an approved content-provisioning process with the project owner before starting.
Sidekick browser extension
Section titled “Sidekick browser extension”Sidekick is the browser extension authors use to preview, publish, and open source documents from a storefront page. You do not need it before creating your first site because Site Creator configures the Sidekick project connection automatically. When authors are ready to use the toolbar, they install the extension from the Chrome Web Store. For installation details, including the Edge browser path, see Sidekick documentation or follow the optional Sidekick step in Create a storefront.
What you do not need right now
Section titled “What you do not need right now”Site Creator and DA.live run in your browser, so you do not need a code editor, a cloned repository, or a local server to create a storefront. For local development, however, you need Node.js, npm, and the project’s AEM CLI. To prepare those tools and start a preview, follow Run your storefront locally.
Documentation hubs
Section titled “Documentation hubs”Use these related documentation sites when a step mentions Edge Delivery, Document Authoring, or the Commerce Admin and you need the official reference. You can look up a specific topic as you work rather than reading each site end to end before starting.
- Edge Delivery Services (blocks, CDN, redirects, authoring concepts): AEM documentation .
- Document Authoring (DA.live workspace, tools, admin API): Document Authoring documentation .
- Adobe Commerce merchant documentation (Admin configuration, catalog, B2B, upgrades): Commerce on Experience League .
- Adobe Commerce developer documentation (APIs, App Builder, extensibility hub): Commerce developer documentation on developer.adobe.com .
What’s next
Section titled “What’s next”Choose the reference that matches your task:
- Backend options: Identify your backend type and required services.
- Storefront configuration: Connect the storefront to the intended environment.
- Verify your storefront setup: Confirm that content, catalog data, and the required shopping features work.
- Create a storefront: Create a repository and starter content.
- Run your storefront locally: Prepare local tools and start a preview.
- Make your first change: Practice editing and checking local code.
- Architecture: Trace page loading, drop-in communication, and Commerce services.