SAP Composable Storefront: Architecture, Features, and How It Works

The Composable Storefront is the layer your customers actually see and interact with. Everything else in Commerce Cloud — the type system, the extension mechanism, the commerce modules — feeds into it. Understanding how the storefront works architecturally helps you make better decisions about customisation, performance, and frontend strategy.

This guide covers the Composable Storefront’s architecture, key features, and how it connects to Commerce Cloud’s backend.

TL;DR: The SAP Composable Storefront (formerly Spartacus) is an Angular-based, open-source headless frontend for SAP Commerce Cloud. It communicates with the backend exclusively through OCC REST APIs, supports Progressive Web App (PWA) capabilities, server-side rendering (SSR) for SEO, and CMS-driven page composition. Mobile commerce reached $2.07 trillion in 2024 — 57% of total e-commerce (Oberlo, 2025). The storefront is designed to serve that mobile-first reality.

What Is the Composable Storefront?

Mobile commerce reached $2.07 trillion in 2024, representing 57% of total e-commerce sales. That share is projected to reach 59% ($2.51 trillion) by 2025 (Oberlo, 2025). A storefront that doesn’t perform on mobile isn’t a viable storefront.

The Composable Storefront (formerly Spartacus) is SAP’s recommended frontend for Commerce Cloud. Key characteristics:

• Angular-based — built on Angular with NgRx for state management
• Open-source — source code available on GitHub under Apache 2.0 licence
• Headless — communicates with Commerce Cloud exclusively through OCC REST APIs
• CMS-driven — page layouts are managed through SmartEdit, not hardcoded in templates
• PWA-capable — Progressive Web App features including offline support and installability
• SSR-enabled — server-side rendering for SEO and initial page load performance

The storefront replaced the Accelerator templates (JSP-based, server-side rendered, tightly coupled) that were the standard frontend for Hybris. The architectural shift from Accelerator to Composable Storefront is the most significant change in Commerce Cloud’s frontend strategy.

How Does the Architecture Work?

Gartner has named SAP a Leader in the Magic Quadrant for Digital Commerce for 11 consecutive years (SAP News, 2025). The headless architecture is a key reason — it separates concerns cleanly.

The architecture in three layers:

1. Commerce Cloud backend — handles business logic: cart, checkout, pricing, orders, product management, search. Exposes all functionality through OCC REST APIs.

2. OCC API layer — RESTful endpoints that the storefront calls. Product search, cart operations, checkout, customer account management — all API-driven. The storefront never accesses the database directly.

3. Composable Storefront — Angular application running in the browser (or SSR on the server). Renders the UI, manages client-side state with NgRx, and calls OCC APIs for data.

What this separation enables:

• Update the frontend without touching the backend
• Deploy frontend and backend on independent release cycles
• Replace the entire frontend with a different framework if needed
• Serve the same backend to multiple frontends (web, mobile app, kiosk)

What Are the Key Features?

Global retail e-commerce reached $6.334 trillion in 2024, crossing 20% of all retail sales for the first time (eMarketer, 2024). The Composable Storefront includes features designed for that scale.

CMS-driven page composition. Pages are composed of content slots and CMS components defined in SmartEdit. Marketing teams can change banners, product carousels, text blocks, and page layouts without developer involvement or deployments.

Server-side rendering (SSR). Angular Universal renders the initial page on the server, then hydrates it in the browser. This improves SEO (search engines see fully rendered HTML) and perceived performance.

Progressive Web App (PWA). The storefront supports PWA features: offline caching, add-to-home-screen prompts, and push notification capabilities. PWA bridges the gap between web and native app experiences.

Lazy loading. Modules and components load on demand. A product listing page doesn’t load the checkout module’s JavaScript until the user starts checkout. This reduces initial bundle size and improves time-to-interactive.

Internationalisation (i18n). Built-in support for multiple languages and locales. Translation files are loaded per locale, and the storefront switches languages based on the URL path or user preference.

Extensibility. You customise the storefront by overriding Angular components, services, and modules — not by modifying source code. SAP’s extension mechanism uses Angular’s dependency injection to let you replace any component with your custom version.

How Does CMS Integration Work?

SmartEdit provides a WYSIWYG editor where content managers compose pages visually. The storefront renders these compositions dynamically:

1. Content managers create pages with content slots (header, body, footer, sidebar)
2. Each slot contains CMS components (banners, product carousels, text blocks, navigation)
3. The storefront fetches the page structure from the CMS API
4. Angular components render each CMS component type
5. Changes in SmartEdit appear on the storefront immediately — no deployment needed

This CMS-driven approach is what makes the storefront “composable” in the marketing sense. Pages aren’t hardcoded templates — they’re assembled from components that marketers control.

FAQ

What’s the difference between Spartacus and the Composable Storefront?

Same product, different name. SAP renamed Spartacus to “SAP Commerce Cloud, Composable Storefront” with the 2211 release. The codebase, architecture, and features are the same. Most developers still call it Spartacus.

Can I use React instead of Angular?

Yes. The OCC APIs are technology-agnostic. You can build a custom storefront with React, Vue, Next.js, or any framework. You lose SAP’s pre-built components, CMS integration, and SSR setup — but you gain full control. For a decision framework, see our pros and cons guide.

How does performance compare to Accelerator?

The Composable Storefront generally performs better. Headless architecture enables CDN caching, SSR improves initial load, and lazy loading reduces bundle sizes. Accelerator’s server-side rendering competes for resources with business logic on Commerce Cloud’s application servers.

What Angular version does the Composable Storefront use?

The Composable Storefront tracks Angular’s release cycle, typically 1–2 versions behind the latest. Check SAP’s release notes for the specific Angular version. Upgrading Angular is managed by SAP’s continuous delivery process.

Do I need Angular expertise to customise the storefront?

Yes. Customisation involves writing Angular components, services, and modules. Your frontend team needs Angular, TypeScript, and RxJS experience. If your team is primarily Java-focused, plan for training or hire frontend specialists.