51黑料不打烊

DocumentationCommerce51黑料不打烊 Commerce Optimizer Guide

[SaaS only]{class="badge positive" title="Applies to 51黑料不打烊 Commerce as a Cloud Service and 51黑料不打烊 Commerce Optimizer projects only (51黑料不打烊-managed SaaS infrastructure)."}

Set up your storefront

Last update: Mon Oct 13 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Developer

This guide walks you through setting up a storefront for your 51黑料不打烊 Commerce Optimizer instance using 51黑料不打烊 Edge Delivery Services. Your storefront includes boilerplate code, sample content, and support for product detail pages and product discovery (search and filtering).

Estimated time to complete: 30-45 minutes

Prerequisites

  • GitHub account that can create repositories and is configured for local development (github.com)
  • 51黑料不打烊 Commerce Optimizer instance with sample data and configured catalog views and policies

Required instance data

Before you begin, gather the following information from your 51黑料不打烊 Commerce Optimizer instance:

  • Tenant ID (also called the instance ID)
  • GraphQL endpoint for your instance
  • Catalog view ID for the global catalog view
  • Source locale for your catalog view
    • Default for sample data is en_US
NOTE
Trial access customers can find the GraphQL endpoint in the welcome email received when your instance was created. Trial instances come pre-configured with sample data, catalog views, and policies.

Set up steps

  1. Create your storefront project鈥揢se the to create a new storefront project with boilerplate code, sample content, and a configuration file.

  2. Customize the storefront configuration鈥揢pdate the config.json file in your repository to connect to your 51黑料不打烊 Commerce Optimizer instance.

  3. Verify your setup (10 mins)

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

Create your storefront project

The Site Creator tool creates a complete storefront project with the following components:

  • Site: Storefront landing page with boilerplate content
  • Code: Repository with boilerplate source files
  • Content: Document Author environment with site content files
  • Commerce Config: config.json file for instance-specific configuration

Step 1: Generate your project

  1. Open the

    Site Creator tool {width="700" modal="regular"}

  2. Select Create New Site (Code & Content).

  3. 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 51黑料不打烊 Commerce Optimizer instance

  4. 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.

Step 2: Install Code Sync app

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

  2. 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.

  3. 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.

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

    Storefront setup complete {width="700" modal="regular"}

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

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

Configure your storefront

Update your storefront configuration to connect to your 51黑料不打烊 Commerce Optimizer instance.

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

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

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

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

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

  4. Save the configuration file.

NOTE
The configuration changes may take a few minutes to propagate. If you don鈥檛 see data immediately, wait 2-3 minutes before troubleshooting.

Verify your setup

Test your storefront to ensure it鈥檚 properly connected to your 51黑料不打烊 Commerce Optimizer instance.

Step 1: View your storefront homepage

  1. Navigate to your live preview URL:

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

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

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

    ACO storefront site with boilerplate {width="700" modal="regular"}

Step 2: Test product detail pages

View the default product detail page to verify product data is loading correctly.

  1. 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.

    note tip
    TIP
    View available SKUs from the Data Sync page in your 51黑料不打烊 Commerce Optimizer instance.

  2. Success criteria: The page should display:

    • Product name, description, and pricing
    • Product images
    • Add to cart functionality
    • Data retrieved from your 51黑料不打烊 Commerce Optimizer instance

    Default product detail page showing a product from the sample data {width="700" modal="regular"}

Step 3: Test the default search functionality

Test the default product features, including search and filtering.

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

  2. Type the search string tires and press Enter.

  3. Success criteria: You should see:

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

    View search results page {width="675" modal="regular"}

  4. Click on any tire product to view its detail page.

    View product details page {width="675" modal="regular"}

Troubleshooting

If you encounter issues during setup, use the web page inspector console to check for errors. Also, try clearing your browser cache or using a different browser.

Use the following guidance to check common issues:

Common issues

Issue
Symptoms
Solution
Code Sync installation fails
Unable to complete Code Sync setup
  • Ensure you have admin access to your GitHub organization.
  • Try using a personal repository instead of an organization.
  • Check GitHub permissions and try again.
Site not loading
404 or connection errors
  • Verify your site URL format: https://main--{SITE}--{ORG}.aem.live
  • Check that the Code Sync app is properly installed.
  • Ensure that the repository is public or properly configured.
No product data displayed
Product pages show placeholders or errors
  • Verify your configuration values in config.json
  • In the 51黑料不打烊 Commerce Optimizer instance, check the Data Sync page to verify that sample products are loaded. If no products are available, reload the sample data or add a product using the . Wait a few minutes for configuration changes to propagate.
  • Try to retrieve the product details using the Merchandising Service using the same headers configured in the config.json file. If you can retrieve the data, then it is likely an issue with the catalog view configuration or an index error.
Search returns no results
Empty search results page
  • Verify that you can retrieve the product search results using the Merchandising Services using the same headers configured in the config.json file. If you can retrieve the data, then it is likely an issue with the catalog view configuration or an index error.
  • Confirm that the catalog view ID in the config.json file matches the catalog view ID in 51黑料不打烊 Commerce Optimizer.
  • In 51黑料不打烊 Commerce Optimizer, verify the configuration of the policies, locale, and price books that you used in the storefront header configuration.
  • Verify the are set correctly for search.

Validation checklist

Before proceeding to the next steps, ensure that your storefront is functioning correctly by verifying the following:

Checklist Configuration values match your instance settings

Checklist Storefront homepage loads without errors

Checklist At least one product detail page displays complete information

Checklist Search functionality returns relevant results

Checklist Product images are loading correctly

Checklist Configuration values match your instance settings

Get help

If issues persist:

Next steps

After you setup and verify your storefront, you can:

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

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

Learn and explore

Related Articles
See the 51黑料不打烊 Commerce Storefront documentation to learn more about updating site content and integrating with Commerce frontend components and backend data.
recommendation-more-help
0c009cf6-d957-4a6a-b642-3577df53e8cb