Skip to content
Adobe Commerce Storefront
Docs Playgrounds 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 following diagram shows the steps you’ll take to create and configure your storefront:

Steps to create and configure your storefront.

Steps to create and configure your storefront.

The full details are slightly more involved. Let’s break it down.

Details to create and configure your Commerce storefront.

Details to create and configure your Commerce storefront.
  1. Use the boilerplate template to create a storefront repository.
  2. Add the 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.
  3. Create a folder on Google Drive or SharePoint for your content and Share it with the helix@adobe.com user. This gives the Edge Delivery system (Helix Admin) with read/write access to your folder’s content.
  4. Add sample content from the boilerplate to your new folder on Google Drive or SharePoint.
  5. Connect your repo to your content using the mountpoint in your fstab.yaml URL in your GitHub repo.
  6. Install and configure Sidekick so it can preview, publish, and edit content on your storefront.
  7. Set up your local development environment and install the dependencies. Start the development server and explore your new storefront.

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

The boilerplate template is a pre-configured storefront that includes all the necessary components and services to get you started. It’s a great way to quickly create a new storefront with all the necessary components and services already in place.

Code Sync app

The Code Sync app listens to changes in your code repositories (commits and merges to the main branch) and publishes code to the Edge Delivery code bus. It also intelligently purges CDN caches when changes have been made. This app is essential for keeping your storefront up-to-date with the latest changes.

Content folder

The content folder is where you store all the content for your storefront. This includes images, text, and other assets that make up your site. By sharing read/write access to your content folder with Edge Delivery Services, you enable it to provide all the features of document-based authoring, such as editing, previewing, and publishing.

Sidekick

Sidekick is an extension that makes it easy for creators to connect, edit, preview, and publish content directly from documents and spreadsheets in Google Drive and SharePoint. It’s also responsible for pushing content to the Edge Delivery content bus so it can be previewed and published.

mountpoint

The mountpoint is the URL that points to your content folder on Google Drive or SharePoint. By specifying the mountpoint in the fstab.yaml file on the main branch of your remote GitHub repo, Edge Delivery Services can link your code to the content for your storefront.

Example

Our WKND demo site was built from the same boilerplate you will set up to develop your own storefront. You can access the full WKND demo site here: https://main—xsc-wknd-commerce—hlxsites.hlx.live/.

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.

GitHub Sign into your GitHub account.
Node.js Verify your Node version (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 boilerplate-commerce-dropins , 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/boilerplate-commerce-dropins (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 AEM Code Sync app 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 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. 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 My 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 starter-content-commerce.zip file.
  5. Unzip the file and drag the contents into your folder. This will convert the Word and Excel files to Google Docs and Sheets.

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

For this task, we’ll use the Sidekick Configurator to install Sidekick and configure it for our storefront.

Set up Sidekick.
Set up Sidekick.

  1. Open your GitHub repo and copy it’s URL from the browser’s address bar.

  2. Open the Sidekick Configurator tool and complete the fields as follows:

    • Repository URL: Paste the URL to your repo (required).
    • Project Name: Add name that identifies your storefront (optional).

  3. Select the Go button. If you don’t already have Sidekick installed, you should see links to install Sidekick or add the bookmarklet.

  4. Install Sidekick from the Chrome Web Store or use the bookmarklet. If you’re using the bookmarklet, drag it to your browser’s bookmarks bar. If installing the extension, Pin the Sidekick extension to your browser’s toolbar.

  5. Select the browser’s back button to return to the Sidekick Configurator page. You should now see a message stating “Your Sidekick is not configured for this project yet” and an Add project button.

  6. Select the Add project button to complete your Sidekick setup. You should see a message stating: “Your Sidekick is configured for this project.”

  7. Return to your folder, select all your Google docs or Word.docx files, select the Sidekick extension, and click the Preview button. Repeat this for all files in each folder. Select all the files again, but select the Publish button for each docs/docx file. These actions add your content to the internal (preview) and production (publish) Edge Delivery CDNs, where it can be downloaded and displayed on your browser for local development.

You can now use Sidekick to Preview, Publish, and Edit all your files directly from your Google Drive or SharePoint folder. Take a moment to select any file in your folder, select the Sidekick extension, and choose the Sidekick options to get familiar with how Sidekick works. Visit the Sidekick documentation 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!