Getting started

Adobe Commerce Storefront lets you build a fast online store on Adobe Commerce, with full control over your brand’s layout and shopping experience. If you already have accounts and a backend ready, you can have a working preview in less than a day.

That speed comes from 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, which 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.

Within that setup, 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 with a working storefront already in place. It includes drop-in componentsNPM packages that provide core Commerce storefront features such as cart, checkout, product details, and account flows. for cart, checkout, product details, search, and accounts, so you customize existing screens instead of building each one from scratch. Drop-in components mount inside blocksJavaScript blocks that integrate drop-in components into Edge Delivery Services pages to power storefront commerce experiences., the individual files in the boilerplate that connect content to code: each block imports a drop-in and renders its UI on the page. 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 directly from the shopper’s browser, so cart and catalog data stay current without any server-side code from you.

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 see which prerequisites apply to your backend, and Licensing requirements to confirm what your license covers.

Get your first preview running

You can start with Create a storefront if your team already has accounts and a chosen backend. If not, this path takes you from zero to a working local preview:

1. Prerequisites — 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. 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. On Commerce on Cloud or on-premises, this includes installing the Compatibility Package so drop-ins can use your APIs.
3. 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.
4. Boilerplate overview — Run the Commerce boilerplate on your machine. After it finishes, you’ll have a local storefront with Commerce blocks already connected.
5. Storefront configuration — Configure headers and paths to match your production environment.
6. CDN configuration — Set up the content delivery network that delivers your project.

That’s a working preview. Everything below is a menu, not a checklist, so open whichever matches what you’re doing next, in any order.

When something goes wrong

Open 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/.

Pick what you need next

• Understand drop-ins — Learn what drop-in components are, how the initializer import pattern works, and how to add one to a page.
• Understand blocks — See how a block’s file imports a drop-in and mounts its UI on the page.
• Choose how to customize — Build a feature fast from an existing drop-in’s pieces, extend a drop-in, or create one when nothing shipped covers what you need.
• Style your storefront — Restyle drop-ins to match your brand.
• Localize your storefront — Support multiple languages and locales.
• Customize layout — Move UI around with slots and layouts.
• Work with events — Wire up analytics and respond to drop-in activity with custom code.
• Configure your storefront — Connect the storefront to Commerce endpoints and services.
• Get to know SEO — Learn how Edge Delivery Services SEO and generative engine optimization (GEO) apply to Commerce storefront indexing, metadata, and launch checks.
• Understand the architecture — See the mental model for how pages load, and how blocks, drop-ins, and Commerce services connect.
• Prepare for launch — Finish these steps before you treat the site as production-ready.

If you already know your task, use the sidebar for the full catalog. If you are building a B2B storefront, the steps in Get your first preview running above still apply. B2B-specific drop-ins and configuration live under B2B Drop-Ins, in the API Reference section of the sidebar, once your preview is running.

Reference and tutorials

Beyond this page, the docs split into three kinds of content: drop-in reference pages, guidance for extending them, and step-by-step tutorials.

Adobe’s drop-in pages include full technical details: API methods, props, slots, events, and version notes. Open the matching page under B2C or B2B Drop-Ins in the API Reference section of the sidebar.

You’ll typically pair that reference with task guidance. Most storefront projects extend those shipped drop-ins: restyling them, moving slots, changing labels, or adjusting behavior. Start at the drop-ins overview, then check Drop-ins, Styling, and Localization in the sidebar, along with each drop-in’s own reference pages. The Drop-In SDK is for writing a new drop-in package from scratch or working directly with the framework, not for typical customization of Adobe’s packages. Find it under API Reference in the sidebar.

For step-by-step tutorials on federated search, cart, checkout, and user account flows, see Tutorials in the sidebar.