Edge Delivery Services for Commerce: A New Storefront Has Dropped

Carlos A. Cabrera
Adobe Tech Blog
Published in
11 min readJan 14, 2025

At Adobe, we have redefined the e-commerce storefront to help merchants streamline development workflows and accelerate time-to-market through a fully composable architecture powered by Edge Delivery Services and our plug-and-play micro-frontends: Commerce Drop-in Components.

The storefront has evolved dramatically over the past decade. From mobile-first to offline-first design to social media integrations and headless omnichannel experiences, businesses have faced challenges in efficiency, scalability, and ever-changing customer expectations. Traditional storefront solutions, often constrained by monolithic architectures rapidly becoming outdated, have faced challenges in keeping up with modern demands.

Once considered cutting-edge, single-page applications (SPAs) have fallen short with high adoption costs and a fragmented developer experience of gluing different tech stacks between content management systems and commerce platforms.

Hello, composable storefront

Developers like me live our day-to-day saturated with buzzwords and cheesy marketing phrases. We all roll our eyes at them. I know I do. But then, one day, you find yourself writing about “composable storefront.” Granted, the term can be considered another vague, trendy term for those unfamiliar. However, it also represents a shift in how e-commerce storefronts are designed and delivered. It advocates for reusable, interchangeable building blocks to create custom solutions. Their principles are rooted in practical architectural choices like micro-frontends, API-first design, and headless commerce.

Adobe Commerce drop-in components are full-featured, domain-specific shopping components designed for seamless integrations through predictable APIs. They include functional user interfaces for pages such as product details, shopping carts, checkout flows, user authentication, user accounts, and more.

Drop-in components are released as modular JavaScript libraries via NPM following semantic versioning to ensure compatibility and stability. They are web framework agnostic and can be integrated into any website using standard JavaScript and CSS.

Long live the content

“Content is King”. It was true in 1996 when Bill Gates coined the term, and it’s still true today. In graphic design, content-first design prioritizes content when structuring and designing a website or application. Instead of shaping content around a pre-existing design, the design is created to support the content–you will rarely find conversion rate success in a storefront using a cookie-cutter design template selected at random. Businesses must understand their identity and build a tailored storefront that tells a story aligned with their brand and market perception. To make this possible, content must determine the technology and features, not vice versa.

The document-based authoring of AEM with Edge Delivery Services goes beyond conventional content management by putting content at the center of the development cycle. A content block-driven approach in Edge Delivery Services provides content authors with a CMS that gets out of the way by removing complexities, empowering authors to create and deliver performant and personalized web pages to their users.

  • Edge Delivery Services simplifies development by using vanilla JavaScript for customizations and integrations, eliminating the need for specialized frameworks or tooling, lowering the barrier for developers to contribute, reducing dependencies, and streamlining maintenance over time.
  • Content velocity is critical for businesses aiming to stay relevant and deliver dynamic user experiences. Document-based authoring plays nice with SharePoint and Google Drive documents, providing rapid content creation, editing, and deployment tools. Its intuitive interface allows content authors to focus on crafting engaging experiences without relying heavily on technical teams, fostering greater collaboration between marketers and developers. Additionally, content from Edge Delivery Services is reusable across channels and can be delivered as HTML, Markdown, or JSON files.
  • AEM with Edge Delivery Services prioritizes performance by optimizing content delivery. It ensures faster page loads and seamless interactions, even for dynamic and personalized experiences. Its capabilities allow businesses to serve lightweight, highly optimized pages that rank better in search engines and deliver superior user experiences.

Boilerplate from zero to shoppable

To help developers hit the ground running, we built the Edge Delivery Services for Commerce Boilerplate. This comprehensive template focuses on function over form. It offers a pre-integrated and functional end-to-end storefront, allowing developers to run an unopinionated, plain-by-design storefront in minutes that they can use as ground zero for your project.

In e-commerce, storefronts are usually structured with core pages for the shopping experience. These pages support key actions in the shopping funnel, such as browsing products, managing the cart, and completing and following up on purchases. The Edge Delivery Services for Commerce Boilerplate is natively integrated with these core pages, where the author manages the sitemap, content, and page structure. Commerce Blocks are powered by Commerce drop-in components, enabling developers to meet their unique use cases by configuring and restructuring the composition layer as needed and even replacing specific containers with third-party or custom-built user interfaces.

The Boilerplate is composed of the following drop-ins:

Auth Drop-in Component

Handles secure user authentication, including sign-ups, log-ins, password resets, and log-outs. It integrates seamlessly across the storefront to support all authentication views.

PDP Drop-in Component

Powers the Product Details Page (PDP) by displaying comprehensive product details, such as descriptions, attributes, pricing, options, and images.

Cart Drop-in Component

Manages cart functionality, including viewing, updating, and merging carts. It supports mini-carts, pricing, estimated shipping/taxes, and order summaries. This drop-in integrates across multiple pages, including the PDP, Cart Page, and Checkout Page.

Checkout Drop-in Component

Streamlines the purchase process with customizable controls for billing, shipping, payment methods, and order placement, powering the Checkout Page for a smooth transaction flow.

Orders Drop-in Component

Provides post-purchase functionality such as order search, shipping status tracking, customer details, and returns. It integrates with Order Confirmation, Order Detail, and Guest Order Status Pages.

Account Drop-in Component

Delivers account management capabilities, including customer details, addresses, payment methods, and order histories. It integrates with Account Pages to create a unified user profile experience.

The composable architecture of Edge Delivery Services combined with Commerce Drop-in Components provides developers with a solid foundation for building storefronts that scale. Whether enhancing the product pages, refining the checkout process, or delivering a custom account experience, the Boilerplate provides the essential tools to create custom experiences.

Getting started

To get started with the Edge Delivery Services for Commerce Boilerplate, follow the steps in the official documentation.

Note: Adobe Commerce is highly customizable, with most customers using extensions. You can use the default Boilerplate’s Commerce environment as a playground. Still, to use your own Commerce instance, you must ensure all the necessary data is accessible via APIs for a headless integration. For more details about requirements, review the Discovery and Preparation Blueprint documentation.

Once you’ve set up the project, run npm install to install all dependencies, and npm dev to run your local development environment.

At this point, you should see your brand-new storefront loaded on your favorite web browser. Go on, click around, explore, and buy something nice. As you have probably noticed, I wasn’t kidding when I said the Boilerplate was unopinionated and plain. It’s supposed to be underwhelming at first sight. Here is where you step in to transform this simple, unopinionated template into a brilliant storefront.

Make it your own

E-commerce sites share common characteristics but have unique identities shaped by their brand and target audience. Designing a customizable, run-time multi-tenant micro-frontend solution that is upgradable over time was a complex challenge the Adobe Commerce team had to solve.

We addressed this by building the drop-in components around consistent design patterns, resulting in a predictable development experience: learn one, and you can work with them all.

These conventions prioritize flexibility, scalability, and ease of customization, facilitating developers to build unique experiences without starting from scratch. By leveraging modular layouts, reusable containers, extensible slots, and streamlined data communication through the event bus, drop-in components balance standardization and the freedom to create.

Look and feel

We designed every Commerce drop-in component using a standard base design system that consists of CSS tokens for colors, typography, spacing, shape styles, and a grid system.

Developers can customize the appearance of drop-in components by overriding or extending the built-in CSS classes. The DOM follows a consistent naming convention across all drop-in components, adhering to the block-element-modifier (BEM) methodology to enhance clarity, ensure predictability, and reduce the likelihood of style conflicts. Shared components used across multiple drop-in components (e.g., buttons, images) use the prefix “dropin,” following the format .dropin-<component>__element — modifier. On the other hand, drop-in-specific components are prefixed with the name of the drop-in component, such as .<dropin-name>-<component>__<element> — <modifier>. For example, the .dropin-button class applies styles to all buttons across the storefront, while the .auth-sign-in-form styles apply the sign-in form from the authentication drop-in component.

Restructuring layouts

In Edge Delivery Services, authors manage pages directly from the content source, including headings, images, videos, links, sections, and blocks. Blocks provide authors with pre-built, structured UI components, enabling them to design pages with sections that serve different functionalities — for example, heading blocks, hero blocks, product recommendation blocks, tiles blocks, etc.

We pre-integrated Commerce drop-in components into these blocks, which are readily available in the Boilerplate. For instance, in the Boilerplate environment, the PDP (Product Detail Page) is authored in products/default.docx and includes the following blocks:

  1. Product Details
  2. Content Enrichment
  3. Product Recommendations

In the image above, each block (represented as a table) corresponds to a folder within the ./blocks/ directory, with folder names written in kebab-case (converting spaces and capitalization into lowercase and hyphens). For example, the “Product Details” block referenced in the table is in the ./blocks/product-details/ directory. Each block directory contains two required files matching its name:

  • A CSS file for the block’s unique styles: ./blocks/product-details/product-details.css
  • A JavaScript file that transforms the block’s markup into the necessary HTML structure: ./blocks/product-details/product-details.js

The Product Details block encapsulates the entire PDP layout. These layouts are fully composable, customizable, and styled based on their respective CSS and JavaScript files. If needed, developers can re-arrange and style all template sections and replace pre-built components with custom UI.

Containers

Drop-in components leverage Containers as modular UI views that structure sections within the layout. Each container delivers domain-specific Commerce functionality to the storefront, enabling flexible composition and customization. In the case of the PDP, there are Containers for each section of the layout, including the gallery, price, product description, configuration options, and more. This structure ensures that each section operates as an independent, composable unit while adhering to the overarching layout.

By breaking the layout into containers, developers can modify individual sections without affecting the design. For example, you can replace the gallery container with a custom image carousel or extend the product configuration container to include new options.

Customizing Containers with Slots

Developers can perform granular customizations to the layout using predefined slot extension points within drop-in containers. These slots provide API methods and, in some cases, extra context data to inject custom HTML elements into specific areas of the UI without rebuilding the entire UI.

For example, in the product details page (PDP) drop-in component, the ProductOption container includes a slot named Swatches. Developers can utilize this slot to add a “Size Chart” link below the product size options.

pdpRenderer.render(ProductOptions, {
slots: {
Swatches(ctx) {
// get slot element for "size" attribute
const size = ctx.getSlotElement('product-swatch - size');
// add link to Sizes
if (size) {
// create link
const link = document.createElement('a');
link.textContent = 'Size Chart';
// set link href to size chart page with product SKU
link.href = `/size-chart?product=${ctx.data.sku}`;
// append link go size
size.appendChild(link);
}
},
},
})($options);

In this script, the Swatches slot is accessed through its API, enabling the dynamic addition of a “Size Chart” link tailored to the product’s SKU. This approach empowers developers to enrich the user interface precisely where needed, offering additional functionality while maintaining a reusable and upgradable codebase.

Data synchronization across drop-in components

Drop-in components are micro-frontends housed in independent and interchangeable containers, but how do they communicate effectively? Creating a seamless user experience from modular components requires robust data synchronization. To ensure that all drop-in components, regardless of their specific functionality, remain synchronized with each other and the overall storefront, we created a centralized event bus that facilitates real-time communication and state management.

For instance, when a user selects an option on the PDP, an event containing the updated product data is emitted to the event bus. Other containers on the PDP that are subscribed to this event are automatically updated to reflect the new information. Similarly, when the user adds the product to their cart, the cart drop-in component instantly updates by subscribing to the relevant cart data event. Drop-in components are interconnected via the event bus by design, enabling developers to subscribe to these events and leverage data changes to create custom features and enhancements.

The case for server-side rendering

Delivering fast, accessible, high-quality content is non-negotiable in e-commerce. Although we build websites for humans, some web crawlers have limited support for client-side rendering, which can impact SEO and the discoverability of product pages.

Product Detail Pages (PDPs) in Edge Delivery Services for Commerce rely on folder-mapped pages — virtual pages created dynamically. A template page is used for all PDP paths requested, i.e., /products/* Essential metadata, including the title, description, keywords, OpenGraph tags, and JSON-LD product schema, is rendered server-side to ensure optimal compatibility with social media sharing while the rest of the page loads client-side for dynamic functionality.

To improve SEO and deliver pages faster to users, Edge Delivery Services employs a serverless function to monitor product updates in Catalog Service. When detecting changes on a product, this function triggers the Edge Delivery Services preview API, which generates a fresh, static HTML version of the product page using the “bring-your-own-markup” render service. This system ensures that templates align with your functionality needs. This hybrid approach ensures that pages are fast, up-to-date, and optimized for users and search engines.

The storefront journey has only just begun

We have reimagined what a modern e-commerce storefront can be, and the Edge Delivery Services for Commerce Boilerplate manifests this vision. It offers developers a streamlined, composable foundation to create high-performance storefronts while addressing the inefficiencies of traditional architectures and bridging the gaps between content management and the commerce platform.

We are just scratching the surface of what’s possible, unlocking a future where every storefront is as dynamic, scalable, and unique as the businesses it represents. Give it a try and join us in rethinking the modern storefront developer experience. Have questions or want to connect with others? Join our Discord channel and be part of the conversation.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

No responses yet

What are your thoughts?