Storefront developer guide

What is Adobe Commerce Storefront?

Adobe Commerce Storefront lets you build a fast online store on Adobe Commerce, with full control over your brand’s layout and shopping experience.

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., Adobe’s global delivery network, turns merchant-authored documents into HTML and serves pages from servers 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 is to connect Commerce data to the page. You start from the Adobe Commerce boilerplatePre-configured storefront with the components and services you need to get started., a Git repository that already contains a working storefront. The boilerplate already includes drop-in componentsNPM packages that provide core Commerce storefront features such as cart, checkout, product details, and account flows. for Commerce experiences such as cart, checkout, product details, search, and accounts. You configure and customize them to match your storefront requirements. Drop-ins call the 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. API from the shopper’s browser, so cart and catalog data stay current without any server-side code from you. You customize how drop-ins look and behave instead of writing every Commerce screen from scratch.

With accounts and a backend in place, you can 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. If you use Adobe Commerce on Cloud, you need a separate Adobe Commerce Optimizer license to use drop-ins. Read Backend options to match your backend type to prerequisites, and Licensing requirements to confirm what your license covers.

New here? Start here

You can start with Create a storefront if your team already has accounts and a chosen backend. If not, the numbered path below helps you sort out Commerce access, choose the right backend, and confirm the services that drop-ins need.

1. Before you start — Gather your tools, accounts, and Commerce access before you open Site CreatorApp in Document Author (DA.live) that creates and initializes a storefront by setting up content, optional code, theme choice, and storefront configuration values..
2. Storefront Architecture — Five short topics: how pages load, what blocks and drop-ins are, how drop-ins coordinate, and how Commerce services connect. Get a clear picture of how the pieces fit together before you start coding.
3. Backend options — Identify your Commerce backend (Adobe Commerce on Cloud, 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.liveThe tooling for creating storefront pages as documents in Google Docs, SharePoint, or DA.live without writing code. Tables in documents define the blocks that appear on each page.. This is where your first working preview comes from.
5. Boilerplate getting started — Run the Commerce boilerplate on your machine. After it finishes, you’ll have a local storefront with Commerce blocks already connected.
6. Boilerplate configuration — Set up your storefront configuration, headers, and paths to match your production environment.
7. Introduction to drop-ins and Using drop-ins — Learn what drop-in components are, how the initializer import pattern works, and what slots, styling, and labels do. Read them before you customize any Commerce UI.
8. Storefront configuration — Connect the storefront to Commerce endpoints and services.
9. Get to know SEO — Learn how Edge Delivery Services SEO and generative engine optimization (GEO) apply to Commerce storefront indexing, metadata, and launch checks.
10. Launch Checklist — Finish these steps before you treat the site as production-ready.

If you already know your task, use the sidebar for the full catalog (Commerce Boilerplate, Commerce Drop-Ins, Storefront Configuration, Go Live, Playgrounds, and Reference). If you are building a B2B storefront, this path still applies. B2B-specific drop-ins and configuration are in the B2B Drop-Ins section in the sidebar after you complete these steps.

When something goes wrong

Start with Storefront Architecture. It shows whether the problem is in content authoring, Edge Delivery Services, or Commerce, so you know where to look instead of searching only under blocks/.

Reference and tutorials

When you need technical details — API methods, props (configuration options), slots (customization points), events, or version notes — for any of Adobe’s shipped drop-ins, open the matching drop-in page 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 the Commerce Drop-Ins overview and each drop-in’s reference pages. The Drop-In SDK section is for a smaller set of cases: use it when you write new drop-in packages from scratch or need to work directly with the framework that initializes and manages drop-ins — not for typical customization of Adobe’s packages.

After you complete the numbered path, see the Tutorials section for step-by-step pages covering federated search, Luma storefront migration (Luma Bridge), cart, checkout, and user account flows.