Storefront architecture
If you’re looking for guidance about launching a production-ready, headless Adobe Commerce storefront with Edge Delivery Services, you’re in the right place!
Big picture
Headless Adobe Commerce storefronts on Edge Delivery Services are built using a composable architecture with domain-driven commerce components called drop-in components. This architecture allows you to build and deploy a storefront that is composed of multiple Adobe services, each with its own responsibility. Drop-in components are connected through APIs and can be developed, tested, and deployed independently for faster development cycles.
Drop-in components rely on Adobe Commerce and Catalog Service APIs to provide data and functionality. These components are designed to be reusable and can be shared across multiple projects. They are integrated out-of-the-box with Edge Delivery Services through the Commerce boilerplate. Adobe Commerce storefronts on Edge Delivery Services are compatible with doc-based authoring, which allows business users to create and manage content without developer intervention.
The following diagram illustrates the composable architecture of a headless Adobe Commerce storefront on Edge Delivery Services:
Storefront
The storefront is the front-end layer of your Adobe Commerce site. It is responsible for rendering the user interface and providing a seamless shopping experience for customers. The storefront is built using a combination of drop-in components, widgets, and front-end blocks that are connected to Adobe Commerce and other services through APIs and hosted on Edge Delivery Services.
The Commerce boilerplate provides an integrated set of drop-in components and widgets that you can use to build a headless Adobe Commerce storefront on Edge Delivery Services. See Create your storefront for more information.
Drop-in components and widgets
Drop-in components are domain-driven commerce components that provide specific functionality for your storefront. They are designed to be reusable and can be shared across multiple projects. Drop-in components are connected to Adobe Commerce and other services through APIs and can be developed, tested, and deployed independently for faster development cycles.
You can find the integration patterns for drop-in components and widgets as pull requests in the Commerce boilerplate repository.
The PLP/Search and autocomplete widgets can be fully customized. You can create project-specific forks of the source code repository. The boilerplate uses a fork with more optimizations. Review open pull requests, which might contain unmerged improvements for Edge Delivery Services.
The source code of drop-in components is private. You can add them to your project as NPM packages:
@dropins/storefront-cart@dropins/storefront-checkout@dropins/storefront-auth@dropins/storefront-account@dropins/storefront-order@dropins/storefront-pdp@dropins/tools
If you cannot use drop-in components and widgets, use the custom PDP and PLP/Search blocks that come with the Commerce boilerplate.
Front-end blocks
Blocks are the fundamental parts of a page delivered by Edge Delivery Services. A block encapsulates styling and code that drives the logical components of pages.
Edge Delivery Services comes with a comprehensive library of predefined “content” and “commerce” blocks, which can be customized to meet your project needs. Code for Edge Delivery Services projects is managed in GitHub. The code is then deployed to the Edge Delivery Services platform, where it is hosted and served to end users.
Content blocks
The Edge Delivery Services components that provide the content and layout for non-commerce pages on the storefront. These include Cards, Columns, Headers, Footers, and many more. See block collection for more information.
Commerce blocks
Compared to content blocks, commerce blocks enable Adobe Commerce functionality (such as cart, checkout, and account) and can become quite complex. They are built using the same principles as content blocks but are more tightly integrated with Adobe Commerce APIs.
Using a frontend framework can help manage the complexity. In the Commerce boilerplate, you can find examples of blocks that use a buildless version of Preact and HTM. You should only use it for blocks that require complex state management with different render states. Otherwise, stick with plain JavaScript.
Use the existing blocks in the Commerce boilerplate as a reference (for example, teaser and product recommendations). If you want to use React, it’s possible, but not recommended. React is usually too heavy (size + execution) to achieve perfect Lighthouse scores.
Adobe Commerce
Adobe Commerce is the backend system that powers your Commerce storefront. You must use version 2.4.7 or later with the storefront compatibility package installed.
Before starting the project, ensure that your Adobe Commerce backend meets the following requirements:
- Product license: Cloud or on-premises (Magento Open Source is not supported)
- Version: v2.4.7
- PHP: 8.3/8.2 for Adobe Commerce 2.4.7
- Storefront services: Ensure that the latest version of following services are installed and configured:
- Data Connection service
- Services Connector
- Catalog Service
- Live Search
- Product Recommendations
Storefront Compatibility package
The Storefront Compatibility package extends the GraphQL schema provided with Adobe Commerce. It provides new mutations and adds missing fields that are needed to implement low-funnel drop-in components, such as the cart, checkout, user account, and order drop-in components.
Storefront services
When connecting your storefront drop-in components to your own instance of Adobe Commerce, you must ensure that your Commmerce backend is configured with the services described here. These services are required for Commerce drop-in components to function properly.
Storefront services are a set of multi-tenant services (shared app, many users, separate data) that provide access to storefront data via GraphQL APIs. These services are very fast and are not tied to scaling constraints of a Commerce environment. They provide read-only access to catalog data, which can drive product detail and list pages, search, navigation, and product recommendations. Synchronized data is stored in a “SaaS data space” available through Adobe IMS.
Availability and setup of these services are a hard requirement for building a storefront on Edge Delivery Services because only these APIs provide the performance to build sites with a 100 Lighthouse score. The storefront services APIs are available in addition to the core Adobe Commerce GraphQL APIs.
This page provides an overview of the services required for your Adobe Commerce storefront.
Data Connection service
The Data Connection extension connects your Adobe Commerce storefront to the Adobe Experience Platform and the Edge Network so that you can enrich and personalize the shopping experience for your customers. Refer to the Data Connection Guide for details and installation instructions.
Services Connector
The Services Connector connects your Commerce storefront to the Commerce backend services listed below. Refer to the Commerce Services Connector Guide for details and installation instructions.
Catalog Service
The Catalog Service module provides fast read-only access to Commerce catalog data. The product details drop-in component requires this service to render product data in the storefront. Refer to the Catalog Service Guide for details and installation instructions.
Live Search
The Live Search service replaces the default Commerce catalog search and installs the Product Listing Page (PLP) widget in your storefront. Refer to the Live Search Guide for details and installation instructions.
Product Recommendations
Product Recommendations uses artificial intelligence and machine-learning algorithms (Adobe Sensei) to create personalized storefront experiences. While not a strict requirement, we recommended it for Commerce storefronts. Refer to the Product Recommendations Guide for details and installation instructions.
It provides data for product recommendations for the current shopper context and surfaces “units” such as “Customers who viewed this product also viewed” and can be placed in several areas of the site. You can configure the behavior of the service in Adobe Commerce Admin.
Edge Delivery Services
Edge Delivery Services is a cloud-based content delivery network (CDN) that provides a scalable, secure, and high-performance platform for delivering your Adobe Commerce storefront to customers around the world. It is designed to deliver dynamic content at the edge, close to the end user, to reduce latency and improve performance.