Storefront developer guide

What is Adobe Commerce Storefront?

Adobe Commerce Storefront helps you build a fast online store on Adobe Commerce without treating speed and brand fit as opposites: you can pursue strong web performance scores while you shape layout and shopping flows for your brand.

Pages are served by Edge Delivery ServicesAdobe's hosting and delivery infrastructure that turns authored documents into fast HTML pages served from servers close to the shopper. You push code to GitHub; Edge Delivery Services builds and publishes automatically. (EDS), Adobe’s global delivery network that turns merchant-authored documents into HTML near shoppers around the world. Merchants keep editing in a document-style workflow while you own the storefront code, so content changes and code changes stay out of each other’s way.

Your job as a developer is to connect Commerce data to the page. You start from the Commerce boilerplate, a Git repository that already contains a working storefront. Then you add drop-in componentsNPM packages that provide core Commerce storefront features such as cart, checkout, product details, and account flows. for the Commerce experiences you need, such as cart, checkout, product details, search, and accounts. Drop-ins call Adobe Commerce GraphQLA query language that drop-in components use to request and update data from Adobe Commerce APIs. Catalog Service, Live Search, and the core Commerce API all expose GraphQL endpoints. APIs from the shopper’s browser, so cart and catalog data stay current without you building that UI on the Commerce server. You customize how drop-ins look and behave instead of writing every Commerce screen from scratch.

Many developers have a working storefront preview in less than a day.

About drop-in licensing

Drop-in components are included with an Adobe Commerce as a Cloud Service or Adobe Commerce Optimizer license. Commerce PaaS by itself does not license drop-ins unless your organization adds Adobe Commerce Optimizer. Read Backend options to match your backend type to prerequisites, and Licensing requirements for who can use drop-ins.

New here? Start here.

You can start with Create a storefront if your team already has accounts and a chosen backend. If not, most early problems come from missing Commerce access, the wrong backend checklist, or storefront services that drop-ins need. The numbered path below closes that gap.

1. Before you start — Gather your tools, accounts, and Commerce access before you open Site Creator.
2. Storefront Architecture — Five short topics: how pages load, what blocks and drop-ins are, how drop-ins coordinate, and how Commerce services connect. Build your mental model before you build code.
3. Backend options — Identify your Commerce backend (Commerce PaaS, Adobe Commerce as a Cloud Service, or Adobe Commerce Optimizer) and confirm what you need before you create a site.
4. Create a storefront — Provision your repo and preview URL with Site Creator in DA.live. This is where your first working preview comes from.
5. Boilerplate getting started — Run the Commerce boilerplate on your machine after which you will have a locally running storefront with Commerce blocks already connected.
6. Boilerplate configuration — config.json, headers, and paths that match your production environment.
7. Introduction to drop-ins and Using drop-ins — What drop-in components are, the initializer import pattern, slots, styling, and labels. Read these before you customize any Commerce UI.
8. Storefront configuration — Connect the storefront to Commerce endpoints and services.
9. Launch checklist — Steps to finish before you treat the site as production-ready.

If you already know your task, use the sidebar for the full catalog (Commerce Boilerplate, Working with Drop-Ins, Storefront configuration, Go live, Playgrounds, and reference groups). When preview or local builds misbehave, read Storefront Architecture first so you split issues into authoring, Edge Delivery, or Commerce instead of searching only under blocks/.

Reference and recipes

When you need APIs, props, slots, events, or version notes for Adobe’s shipped drop-ins, open the matching drop-in under B2C Drop-Ins or B2B Drop-Ins in the sidebar.

Most storefront projects extend those shipped drop-ins (styling, slots, labels, and behavior). That work lives in Working with Drop-Ins and each drop-in’s reference pages. The Drop-ins SDK section is for a smaller set of cases: developers who author new drop-in packages or integrate with the mounting and lifecycle framework—not typical customization of Adobe’s packages.

The Recipes (How-Tos) section provides step-by-step pages for common tasks such as federated search, Luma Bridge, cart, checkout, and user account flows.