Skip to content
Adobe Commerce Storefront

Search is only available in production builds. Try building and previewing the site to test it out locally.

Getting started

Storefront Builder Lab

In this lab, you will use the new Storefront Builder to make changes and additions to your company’s Adobe Commerce Storefront powered by Edge Delivery Services. You will take the role of a marketing professional whose daily job involves optimizing the storefront for customer conversions and creating new product pages, marketing campaigns, and customer conversion experiments.

Lab Scenario

Apple is releasing its latest iPhone. Your company, CitiSignal, wants to launch a catalog update and promotional campaign related to this event. The goal is to increase sales and customer conversions.

Lab Goals

In this lab, you will learn how to:

Lesson 1: Create a unique product details page
Lesson 2: Run a promotional campaign targeted at general and loyal customers
Lesson 3: Experiment with customer conversions in the cart.

Lab Sign in

  1. Navigate to https://da.live/#/adobe-summit-l320/.
  2. Sign in to the lab by selecting the Sign in button on the top right.
    • Email address: L320+XX@adobeeventlab.com (replace XX with your seat number)
    • Password: Adobe4Summit!
    • Profile/Organization: Commerce Extensibility Lab.
  3. Open the project folder 📁 for your assigned seat number. Example: seat-12.
  4. If you made it here, you’re ready to start the lab.

Lab Warmup

Before you get started with the lessons, make sure you can successfully execute the following steps on your workstation:

  1. View the contents of the root folder (seat-xx) of your project.
  2. Open any document in your project by selecting it with a single click for editing and previewing.
  3. Use the Instant Preview menu on the right to see all the changes you make to the page in real-time.
  4. Revert changes by using the Undo button on the Edit menu or using Cmd+Z on your keyboard.
  5. Access images in the AEM Assets library from the Edit menu: Library > AEM Assets.
  6. Preview any document in your CitiSignal site by selecting the Action button (paper-plane icon, top-right), then selecting the Preview button.

Lab Tips

  1. Follow the steps in order and check the screenshots.
  2. Use the Instant Preview menu often.
  3. Select the Action (paper-plane icon) > Preview button on occasion to view your changes.
  4. Select the Library > AEM Assets menu to find images.
  5. Copy and paste blocks to save time.
  6. Undo changes if you make a mistake.