DocumentationCloud Service Guide

Set up your storefront

Last update: March 27, 2025
  • Topics:
  • Services
  • Saas

CREATED FOR:

  • Developer
NOTE
This documentation is currently in a pre-release state and is subject to change without notice.

The following steps demonstrate how to quickly set up your Adobe Commerce Storefront powered by Edge Delivery using the aio commerce init command. This process sets up the following:

  • Commerce Storefront powered by Edge Delivery Services - A performant, scalable, and secure storefront that is powered by Adobe’s Edge Delivery Services.
  • API Mesh for Adobe Developer App Builder - an API platform that allows developers to combine multiple data sources into a single GraphQL endpoint. API Mesh orchestrates third-party API with Adobe API through a single gateway. One query to the single GraphQL endpoint can return results from multiple sources.
  • Adobe Developer Console - A collection of developer tools with access to APIs, events, runtime functions, and plugins, whic you can use to build projects for Adobe applications.
  • Adobe I/O Runtime - A serverless engine for deploying custom code that responds to events and executes functions in the cloud.

Prerequisites

Before running the aio commerce init command, you must complete the following prerequisites:

  1. Install Node Version Manager (NVM).

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

  2. Install Node.js and NPM. For more information, see Node.js.

    nvm install 22

    npm install -g npm

  3. Install the Adobe I/O Runtime CLI.

    npm install -g @adobe/aio-cli

  4. Install the Adobe I/O API Mesh plugin.

    aio plugins:install @adobe/aio-cli-plugin-api-mesh

  5. Install the Adobe I/O Commerce plugin.

    aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce

  6. Update any existing plugins.

    aio plugins:update

  7. Log in to your Adobe Experience Cloud account.

    aio login

  8. Select the IMS org, project, and workspace. Use the arrow keys and press Enter to make your selection. For more information on aio commands, refer to the Adobe I/O CLI documentation.

    aio console org select

    aio console project select

    aio console workspace select

  9. If you have not already, accept the Developer Terms of Use in the Adobe Developer console by navigating to https://developer.adobe.com/console/home and clicking Accept and continue.

Run the aio commerce init command

Running the following command will create a scaffolding for your Commerce storefront. This scaffolding provides a great starting place for building and understanding your storefront. For more information about working with the storefront, see the Adobe Commerce Storefront documentation.

  1. Run the init command:

    aio commerce init

  2. If you are already logged into GitHub, enter Y to create the repo under your username.

  3. Enter the name of the repository you want to create.

  4. Select one of the following options:

    • Use the demo Adobe Commerce tenant - Use a demo tenant.
      • If you select this option, you are prompted to install the AEM Code Sync bot in a browser window. You must specify the repository you created and authorize the bot. Return to the CLI and enter y to confirm the AEM Code Sync bot installation.
    • Pick an available Adobe Commerce tenant - Select an existing Commerce tenant in the selected organization.
      • If you select this option, you must select the project and workspace to create a mesh in.
    NOTE
    If you select the Pick an available API (Mesh -> SaaS) option, you must have an existing Project and Workspace in the Adobe Developer Console. Creating a templated project and selecting App Builder will automatically create the necessary workspaces.

  5. Once the process completes, you can customize your storefront using the following methods:

    • Customize your code: https://github.com/<username or org>/<repo name>
    • Edit your content: https://da.live/#/<username or org>/<repo name>
    • Manage your config: https://da.live/sheet#/<username or org>/<repo name>/configs-stage
    • Preview your storefront: https://main--<repo name>--<username or org>.aem.page/
    • Run locally: aio commerce:dev

To customize your storefront, refer to the Adobe Commerce Storefront documentation.

recommendation-more-help
5ecfe1a6-f74c-4745-a54a-99b24da024bb