Create a Storefront

Welcome to your Commerce Storefront journey. Our goal is to make the journey fun and informative. We start every topic with big-picture overviews and relevant vocabulary. We then walk you through the details step-by-step. Let’s get started.

Big picture

The tutorial helps you quickly create a new Edge Delivery Services storefront using the Commerce boilerplate template . The boilerplate provides a starter storefront that uses a pre-configured Adobe Commerce environment.

After completing this tutorial, you will have a new GitHub repository with a storefront that is pre-configured with all the necessary components and services to get you started. You will also have a local development environment where you can explore the boilerplate and start customizing it to develop your own production storefront.

The following diagram shows the steps you’ll take to create and configure your starter storefront:

Steps to create and configure your starter storefront.

1. Create Site Repo by generating a storefront repository from the boilerplate template .
2. Add Code Sync App to your newly created repo. This app automatically redeploys your storefront when you push changes to the main branch. It also provides the Edge Delivery system (Helix Admin) with access to your repo so it can coordinate code changes with content changes. Installing it on your repo automatically configures the content pointer in your site’s helix configuration.
3. Link Repo to Data using the values in your storefront configuration in your GitHub repo.
4. Add Content to the Document Author environment hosted at https://da.live/ using the Site Creator tool.
5. (Optional) Use Universal Editor for content editing to edit content on your storefront.
6. (Optional) Use Sidekick and configure it to preview, publish, and edit content on your storefront.
7. Set up Local Environment to enable the development of the boilerplate into your own storefront.
8. Secure your storefront to protect your content, repository, and site access before deploying to production or sharing with external users.

Which backend do you have?

Storefront supports three distinct customer scenarios. Each has different prerequisites and setup steps. Follow only the guidance for your backend. See the Get started section for architecture and setup guidance.

Scenario	Description	Prerequisites
Commerce PaaS	Existing Adobe Commerce Platform-as-a-Service customers who previously accessed Storefront without Adobe Commerce as a Cloud Service or Adobe Commerce Optimizer licenses	Manual installation: Storefront Compatibility package, Storefront services (Data Connection, Services Connector, Catalog Service, Live Search, Product Recommendations). See Get started for prerequisites.
Adobe Commerce as a Cloud Service	New Adobe Commerce as a Cloud Service customers whose license includes Storefront	All requirements and services are automatically managed. See Get started for prerequisites.
Adobe Commerce Optimizer	New Adobe Commerce Optimizer customers whose license includes Storefront, or existing Commerce customers who add Adobe Commerce Optimizer	Fully managed SaaS. See Get started for supported backend combinations.

Confirm your backend’s prerequisites before continuing (see the Get started section for setup guidance). Unless a step says otherwise, it applies to all backend types; only Link repo to commerce data is backend-specific.

Import an existing EDS site

If you have an existing Edge Delivery Service site for your Commerce project, you can skip the store creation process, and import both the code and the content into the Document Author environment using the Site importer tool .

Vocabulary

Before we dive into the step-by-step guide, let’s review some key Vocabulary that will help you understand the process of creating and configuring your storefront.

Boilerplate template

Pre-configured storefront with the components and services you need to get started.

Code Sync app

Syncs your repo with the Edge Delivery code bus and purges CDN caches when you push. It is installed on a repository—global installation on a user or org space is not allowed. Installing it on a repo configures your site’s content pointer in the helix configuration to your DA (Document Authoring) folder.

Content folder

Folder for your storefront content (images, text, assets). Edge Delivery Services uses it for document-based authoring: editing, previewing, and publishing.

Sidekick

A browser extension that allows creators to edit, preview, and publish content from a content folder. It pushes content to the Edge Delivery content bus for previews and publishing. It also helps developers open the source document from a published page. For example, on yoursite.net/apparel, clicking the Edit button from Sidekick opens another browser tab showing the source document from your content folder.

Site Creator

An app in Document Author (DA.live) that creates and initializes your storefront. Choose content only or code and content and pick a base theme for B2C (default) or B2B. The app generates the storefront configuration and fills in values from the API where possible.

Example

Our CitiSignal demo site was built from the same boilerplate you will set up to develop your own storefront. You can access the full demo site here: main--citisignal-one--adobedevxsc.aem.live .

Step-by-step

The centerpiece of this 20-minute storefront is our Commerce boilerplate template.

Prerequisites

Before you begin, take a moment to set up these required tools and accounts as needed.

Adobe Commerce backend Verify prerequisites for your backend type.

GitHub Sign into your GitHub account (personal or Enterprise).

Node.js Set your Node version (22.13.1 LTS).

AEM Command Line Tool Install the AEM CLI tool.

Create site repo

This task requires you to have a GitHub account with access to the organization or owner where you want to create your new repo. All three backends use the same boilerplate template.

Personal GitHub account

Create the repo under your personal account. When you select Owner, choose your username. Install the Code Sync app on the repository in the next step.

GitHub Enterprise (organization)

Create the repo under your organization. When you select Owner, choose the organization. You may need organization admin approval to install the Code Sync app on a repository. Ensure you have permission to create repositories and install GitHub Apps in the organization.

Org access troubling?

If you have trouble with your org access, you can create your repo from a personal account first; then migrate that repo to a repoless EDS site after you learn more about EDS and repoless.

Create your storefront repo.

Sign into GitHub

Make sure you are signed into your GitHub account before you start. Otherwise, you will not see the Use this template button.

1. Navigate to aem-boilerplate-commerce , select the Use this template button, then select the Create a new repository option to open the form.

2. Complete the form with the following details:

   • Repository template: hlxsites/aem-boilerplate-commerce (default).
   • Include all branches: Do not include all branches (default).
   • Owner: Your organization or account (required).
   • Repository name: A unique name for your new repo (required). Must be lowercase and can only contain letters, numbers, and hyphens (no underscores or periods).
   • Description: A brief description of your repo (optional).
   • Public or Private: We recommend public (default).

3. Select the Create repository button and watch GitHub create your new storefront repo.

4. After a few seconds, you should be redirected to the home page of your new repo.

Managed backends (ACCS / Adobe Commerce Optimizer)

Adobe Commerce as a Cloud Service and Adobe Commerce Optimizer use the same repo creation steps above. The only difference is in the next step when you configure the storefront to point to your managed environment.

Add the Code Sync app

Install the Code Sync app on your repository (it cannot be installed globally on a user or org). It redeploys your storefront site whenever you push or merge changes to the main branch. Same for all backends.

Add AEM Code Sync to your repository.

Slightly different UIs

A gray background on an organization or account indicates that at least one repository within it has the Code Sync app installed. In such cases, you are redirected to the Code Sync configuration page for that org or account, where you choose which repositories have the app. There are no differences in the steps, but the UI differs slightly from the one shown in the diagram (Install vs Save buttons), which shows the Code Sync page when installing on a repository for the first time.

Personal GitHub account

Select your username when choosing where to install. You’ll see your personal repositories in the selector.

GitHub Enterprise (organization)

Select your organization. You may need admin approval to install the Code Sync app on repositories. If your organization uses SAML SSO, you may need to authorize the app for SAML SSO access.

1. Navigate to the AEM Code Sync app and select the Configure button (top right) to open the page where you choose which repository to install it on.

2. Select the organization or account that owns the repo you just created.

3. From the form, choose Only select repositories, open the Select repositories selector, and choose your repo from the list.

4. Select Install (or Save, see note above) to install Code Sync on your repository.

5. You should see a success screen if the installation completed without errors. Your repo is now connected to the Edge Delivery Services code bus.

6. (Optional) If you return to the account selection page , your repo’s organization or account will now be gray with “Configure” added. Select your org or account again to access the Code Sync configuration page, where you can see which repositories have Code Sync installed and add it to more repositories.

Link repo to commerce data

To link your storefront repo to your commerce backend, use the config generator tool to automatically generate a storefront configuration file for your site based on your Commerce backend. The configuration differs significantly by backend — follow only the tab for your backend.

Update the storefront configuration for your project:

1. Open the config generator tool and select your backend type to generate the correct storefront configuration structure.
2. Enter the values for your project. See the Storefront configuration reference for field descriptions (select the tab for your backend).
3. Replace the storefront configuration file in your repo with the generated file.
4. Commit and push the updated file to the repo.

Add content

Now let’s create and initialize the content side of your storefront. We’ll create a new folder within the Document Author environment. Same for all backends.

Demo Content

If you do not want demo content, you can create a file in https://da.live/#/{org}/{site}/ replacing {org} and {site} with your own. This reserves the org and site for you to add your own content.

1. Open the Site Creator app in DA, and select Use existing repository.
2. Copy the GitHub owner and site values to the input fields and click Create site.
3. Follow the prompts, and by the end the content will have been copied to your content folder.
4. You may have to manually preview or publish the content, depending on whether you followed the prerequisites.

Initialize your storefront content

(Optional) Use Universal Editor for content editing

See Using the Universal Editor for workflow and documentation links.

(Optional) Use Sidekick for content editing

Detailed Sidekick information

Sidekick is automatically installed on new EDS sites. Configuration of Sidekick is now managed via the site config. Visit the Sidekick documentation for more information on how to use Sidekick to manage your storefront content.

Set up local environment

1. Go to your GitHub repo and select the Code button to copy the repo’s git URL for cloning (HTTPS or SSH).

2. Open a terminal on your local machine and clone your storefront repo:

   git clone [HTTPS or SSH URL]

3. Navigate to the root of your local repo and install the dependencies.

   npm install

4. Install the AEM client.

   npm install -g @adobe/aem-cli

5. Start the development server to view the boilerplate storefront.

   npm start

   The first page of your boilerplate storefront should be visible in your browser at http://localhost:3000.

   

6. Open the project in your favorite code editor. You’re now ready to explore the boilerplate and start customizing your storefront!

(Optional) Secure your storefront

While your storefront is now functional, it’s important to understand that your site is not protected by default. We recommend securing your content, repository, and site access before deploying to production or sharing with external users. See Security and access in the Launch checklist for step-by-step instructions.

Your site is NOT protected by default.

To secure your content and site:

• Content in DA: Configure permissions at https://da.live/docs/administration/permissions
• EDS site authentication: Follow guide at https://www.aem.live/docs/authentication-setup-authoring

Congrats!

You now have a Commerce storefront project on GitHub and a local development environment to learn how to customize drop-in components to develop the boilerplate into a production storefront.