Skip to content
Adobe Commerce Storefront Logo Adobe Commerce Storefront

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

How a page loads

The diagram shows six stages from a merchant-authored document to a Commerce API call in the browser. The steps below follow the same order. Use them to decide whether a preview problem comes from authoring, HTML delivery, your block code, or Commerce endpoints instead of assuming every empty UI is only a GraphQL issue.

Loading diagram...
Six stages from document to data: the author creates a document, Edge Delivery Services publishes it as HTML, the browser loads the page, the block decorator runs your repository code, the drop-in mounts its UI, and the drop-in fetches live Commerce data.

  1. The merchant creates a document in DA.live, Google Docs, or SharePoint. In document-based authoring, a table in the document defines a block on the page — for example, a “Commerce Cart” table becomes the cart block. In the Universal Editor, the merchant edits blocks visually on the rendered page and no document tables are involved.

  2. Edge Delivery Services converts the document into an HTML page. Each table becomes a div with a class name that matches the block, for example, <div class="commerce-cart">. EDS serves this HTML from servers close to the shopper, which is what makes pages load fast.

  3. The shopper’s browser requests and loads that HTML.

  4. The block decoratorThe JavaScript module that runs for a block after the page loads. It imports the initializer, then calls provider.render() to mount the drop-in UI into the block region of the page. runs for each block on the page. A block decorator is the JavaScript file in your repository for that block, for example, blocks/commerce-cart/commerce-cart.js. Edge Delivery Services finds each block’s div in the HTML, loads the matching file from your repository, and runs its default export. Inside that function (decorate(block)), your code imports the drop-in’s initializerA JavaScript module that configures a drop-in when imported, such as setting endpoints, registering dictionaries, and preparing runtime behavior.. The initializer sets the Commerce API endpoint and loads translated labels. Your code then calls provider.render() to mount the drop-in UI in that region of the page.

  5. The drop-in component renders the shopper-facing UI — the cart, checkout form, product detail page, or whichever Commerce experience that block delivers.

  6. The drop-in sends requests to your Commerce API endpoints and renders the data it gets back. For example, the Cart drop-in calls Commerce GraphQL to load the shopper’s cart items and totals. This call goes from the shopper’s browser directly to Commerce. Edge Delivery Services is not in the middle of it.

What’s next

Section titled “What’s next”

Blocks and the repository compares content and Commerce blocks and points at the repo folders that wire them to drop-ins.