۶Ƶ

Skip to content
۶Ƶ Commerce Storefront
DevelopersPlaygrounds Videos
Get Started

Create your storefront

time to complete
~20 minutes

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. And finally, we provide a sandbox for practice when possible. Let’s get started.

Big picture

The tutorial helps you quickly create a new Edge Delivery Services storefront using the .

Step-by-step

The centerpiece of this 20-minute storefront is our Commerce boilerplate template. It provides a starter storefront that is pre-configured with our Commerce components and services and pre-connected to our Commerce boilerplate backend.

Prerequisites

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

۶Ƶ Commerce 2.4.7+ ۶Ƶ Commerce system requirements.
GitHub Sign into your GitHub account.
Node.js Set your Node version (22.13.1 LTS).
Google Drive** Create a Google Drive account.
SharePoint** Create a SharePoint account.

Create code repository

This task requires you to have a GitHub account with access to the organization or owner where you want to create your new repo.

Create your storefront repo

Create your storefront repo.

  1. Navigate to , 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).
    • 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.

Add Code Sync GitHub app

The Code Sync app redeploys your storefront site whenever you push or merge changes to the main branch of your repo.

Add AEM Code Sync to your repository.

Add AEM Code Sync to your repository.

  1. Navigate to the and select the Configure button (top right) to open the repo selection page.

  2. Select the organization or account for 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 complete the Code Sync installation.

  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 , 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. This page shows when the app was added to your organization (highlighted) and allows you to connect the Code Sync app to additional repositories.

Create and share folder

Now let’s create and set up the content side of your storefront. We’ll create a new folder and share it with Edge Delivery Services. Choose the tab below that matches your chosen storage service, Google Drive or SharePoint.

Follow these steps to create and share your Google Drive folder.

Create and Share your Google Drive content folder.

Create and Share your Google Drive folder.
  1. Open your Google Drive page, select the ✚ New button (top-left), create a new folder, and give it a name that identifies your storefront.
  2. Open your new folder (double-click).
  3. Open your folder’s menu, and select the Share > Share menu item.
  4. Type helix and select helix@adobe.com as the recipient.
  5. Ensure the Editor option (default) is selected to give read/write access, then select the Send button.
  6. You can verify your folder is now shared if you see a new Shared icon (👥) to the right of your folder.
  7. Additionally, you can select the icon and verify that helix@adobe.com is listed as an Editor. If it is, your content folder is now connected to the Edge Delivery Services content bus.

Add sample content

Now let’s add the boilerplate sample files to your content folder. Choose the tab below that matches your chosen storage service, Google Drive or SharePoint.

Add sample Google Drive content.

Add sample Google Drive content.
  1. Open your Google Drive folder.
  2. Select the ⚙️ Settings icon (top-right of the page) and choose Settings from the menu.
  3. Enable the Uploads checkbox to convert uploads to Google Docs editor format. Return to your storefront folder.
  4. Download the boilerplate’s file.
  5. Unzip the file and drag the contents into your SharePoint folder.

Connect repo to folder content

Now we need to link your GitHub storefront repo (the code) to your storefront folder (the content). Linking your code to your content enables Edge Delivery to coordinate code changes in the repo with content changes in your Google Drive or SharePoint folder. After step 1 below, all steps are the same for Google Drive and SharePoint.

Replace the default boilerplate's folder URL with your content folder URL.

Replace the default boilerplate's folder URL with your content folder URL.

  1. Copy the URL to your content folder:

    • For Google Drive: Open your folder and copy the URL from the browser’s address bar.
    • For SharePoint: Open your folder and select the Copy link button.

  2. Go to your GitHub repo and open the fstab.yaml file from the project root.

  3. Edit the fstab.yaml file in place.

  4. Replace the default mountpoints URL (which points to the boilerplate’s SharePoint folder) with your Google Drive or SharePoint folder URL.

  5. Select the Commit changes… button.

  6. Commit the changes directly to main. Now the Edge Delivery system knows where to find the content for this repository.

Set up Sidekick for content

Set up Sidekick.
Set up Sidekick.
  1. for more information on how to use Sidekick to manage your storefront content.

Set up local dev 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. 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.

    Boilerplate Home Page

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