Set up your storefront

Create your storefront project–Use the Site Creator tool to create a new storefront project with boilerplate code, sample content, and a configuration file.

Customize the storefront configuration–Update the config.json file in your repository to connect to your Adobe Commerce Optimizer instance.

Verify your setup (10 mins)

• Preview your storefront site
• Test product detail pages and search functionality

Open the Site Creator tool

{width="700" modal="regular"}

Select Create New Site (Code & Content).

Complete the site configuration:

• GitHub Organization/Username: Enter your GitHub username or organization name
• Site Name: Choose a descriptive name for your storefront
• Commerce GraphQL Endpoint (optional): Enter the GraphQL endpoint for your Adobe Commerce Optimizer instance

Click Create Site to create the GitHub repository with the storefront boilerplate code.

When the repository is created, the Site Creator updates and prompts you to install the Code Sync app.

Click Install AEM Code Sync App to open the Code Sync installer in a new tab.

Configure the Code Sync app:

• Select your GitHub organization, then click Configure.
• In the Code Sync interface, click Only select repositories.
• Click the Select repositories menu, then choose the storefront code repository you created.
• Click Save to register your repository.

Return to the browser window where the Site Creator is open, and click Create Site.

The Site Creator copies the storefront boilerplate content to the Document Author environment. This process takes 1-2 minutes.

In the Site Details section, review the links for your storefront project:

{width="700" modal="regular"}

Use these links to manage your storefront code, content, and configuration.

Copy and save these links for future reference: Click **Copy.

Open the configuration manager using the link that you saved earlier:

https://da.live/sheet#/<username or org>/<repo name>/config.json

Locate the cs (Catalog Service) section in the configuration.

Replace the placeholder values with the values for your instance. See Prerequisites.

"cs": {
   "AC-View-ID": "{catalogViewId}",
   "AC-Environment-ID": "{tenantId}",
   "AC-Source-Locale": "en_US"
}

Save the configuration file.

Navigate to your live preview URL:

https://main--{SITE}--{ORG}.aem.live

Replace {ORG} and {SITE} with your GitHub organization and site name.

Success criteria: You should see the storefront homepage with boilerplate content.

{width="700" modal="regular"}

Navigate to a sample product page:
https://main--{SITE}--{ORG}.aem.live/products/placeholder/{sku}

Use any SKU from your sample data, for example:
https://main--{SITE}--{ORG}.aem.live/products/placeholder/aur-flu-tir-std-2017

For the default storefront, you can use the placeholder value in the route to view the product. When you begin customizing your storefront, you can customize the storefront code to set the path to the product detail page based on product routes defined in your catalog.

Success criteria: The page should display:

• Product name, description, and pricing
• Product images
• Add to cart functionality
• Data retrieved from your Adobe Commerce Optimizer instance

{width="700" modal="regular"}

On the storefront homepage, click the magnifying glass icon in the header.

Type the search string tires and press Enter.

Success criteria: You should see:

• Search results page with tire products
• Filtering options in the sidebar
• Product listings with images and pricing

{width="675" modal="regular"}

Click on any tire product to view its detail page.

{width="675" modal="regular"}

Install Sidekick - Browser extension for editing, previewing, and publishing content directly from your website

Set up a local development environment - Create a local environment to customize your storefront code and content