Practical Approaches to Modernize SAP Commerce Cloud with Composable Headless Frontend Architecture

Retailers using SAP Commerce Cloud accelerator templates will soon need a new eCommerce website storefront, as SAP is retiring its legacy UI accelerator templates. This opens the door for retailers to modernize SAP Commerce Cloud with composable commerce. Unlike SAP Commerce Cloud’s historical UI accelerators, a headless front end is decoupled from backend systems. Headless front ends are more scalable and flexible than SAP accelerator templates. Like the accelerators, they can be further enhanced by adding Artificial Intelligence (AI) or Augmented Reality (AR). Moving from tightly coupled templates to composable commerce might seem insurmountable, but the conversion to a headless front end is worthwhile. Newer solutions, including those from SAP, are more fit for purpose and more competitive than SAP’s legacy accelerators. Composable solutions help future-proof retailers’ organizations and offer a more satisfying user experience.

As McKinsey noted, putting software and emerging technologies at the core of retailers’ services is central for future growth. Retailers who convert from SAP Commerce Cloud accelerator templates to a microservices-based, API-first, cloud-native, and headless (MACH) architecture align eCommerce with development and other business goals. With a headless frontend system, retailers are free to design their eCommerce website to match their brand.

In SAP Commerce Cloud—once known as “Hybris”—the storefront UI templates had become standard. Commerce Cloud is a comprehensive commercial eCommerce platform and is the default retail experience for billions of consumers, including B2C, B2B, and industry-specific customers. Retailers must select a replacement by the third quarter of 2027, as SAP will remove its deprecated storefront solution from its platform. That’s also when SAP will stop supporting the underlying extensions and shipping the old UI accelerator code. SAP released a statement offering suggestions for retailers who have questions.

Fortunately, eCommerce retailers have options:

• Alokai (formerly Vue Storefront)
• SAP Composable Storefront (formerly Spartacus)
• Custom headless front end (React or Angular)
• Custom front end and back end (full custom stack)

In addition to those options, there are other considerations when moving to a headless front end:

• Using the strangler pattern for a phased conversion approach
• Keeping session management persistent during the conversion to prevent cart abandonment and improve SEO
• Eliminating unused endpoints and addressing other inefficiencies in OmniCommerce Connect (OCCv2) APIs

Take a deep dive into the future of composable commerce with Myles Bunbury, P.Eng., VP of Consumer Solutions at Intellias, in this roundtable webinar

Source: Alokai 

The business case for modernization

Converting from legacy storefront UI accelerators to composable headless frontend systems is a challenge. Nevertheless, retailers will benefit significantly from modernization in many ways.

• Better performance boost: When more concurrent users are on the site, a modern front end loads faster and scales automatically.
• Higher customer satisfaction: Modern front ends provide AI-powered personalized recommendations, always-on availability, omnichannel support, and zero-downtime releases.
• Greater compatibility: Integration becomes easier with modern frontend technologies like GraphQL APIs and standard protocols for solutions like payment gateways, headless content management systems (CMSs), digital asset management systems (DAMs), customer relationship management systems (CRMs), AI agents, and analytics tools.
• Lower TCO: Modern front ends greatly reduce the total cost of ownership (TCO) of software deployment and time to market for new features because they are separate from the back end, which means they require less testing.
• Data protection: Secure by design, a modern front end also improves compliance with various regulations, laws, and standards, such as the GDPR, the CPRA (formerly CCPA), and WCAG.

Options to modernize SAP Commerce Cloud with a composable architecture 

Options to upgrade SAP Commerce Cloud with a composable MACH architecture

Each of the four modernization options for SAP Commerce Cloud provides modern, composable commerce solutions. However, they are built with different technologies and differ in terms of scalability, flexibility, and vendor dependence.

Alokai

For retailers seeking an eCommerce platform designed for performance at a lower price tag than a custom tech stack, Alokai is a solid choice. This headless, frontend-as-a-service platform is developed with React (earlier versions developed with Vue.js and Qwik are also available). Built for composable commerce, Alokai’s front end connects to SAP Commerce Cloud and other platforms using GraphQL APIs. It includes prebuilt integrations with common eCommerce, CMS, search, and payment platforms, such as Shopify and Salesforce Commerce Cloud. It also connects to major SAP Commerce Cloud subsystems, such as SmartEdit, offering a painless setup. Developers can build highly customizable front ends using Alokai that will grow with the retailer. Therefore, retailers wanting a responsive headless frontend developed using modern JavaScript practices and backed by strong technical support should consider Alokai.

SAP Composable Storefront

Retailers who want to stay with SAP should choose the company’s official headless frontend, SAP Composable Storefront. Unlike Alokai, SAP’s eCommerce solution is developed in Angular. The SAP Commerce Cloud headless approach replaces the legacy UI accelerator templates. It’s designed to plug directly into SAP Commerce Cloud using OCCv2 APIs.

Fully supported by SAP, Composable Storefront comes with prebuilt Angular components for core eCommerce features. It is the safest choice for retailers that want headless SAP commerce and don’t want to manage third-party, open-source, or customized technology. SAP Composable Storefront also fully aligns with SAP Commerce Cloud. Retailers that want to stay with their long-term partner and desire a tightly integrated SAP experience should choose SAP Composable Storefront.

Custom storefront builds

A fully custom front end, built with either React or Angular, gives retailers the most control and the greatest flexibility over their headless frontend systems. Custom systems are not connected to a vendor and typically don’t require a license fee. These platforms are frequently deployed in the cloud (on AWS, Google Cloud, or Azure) and connect to SAP Commerce using GraphQL APIs.

Often, it makes sense for SAP customers to deploy a custom headless front end in Azure, as SAP Commerce Cloud runs on that platform. This strategy can reduce latency and prevent additional charges for data ingress/egress between cloud platforms. However, if using Azure would require a large cloud migration from existing development on AWS or GCS, or if other components connected to the headless front end have different requirements, this must be taken into consideration.

Choosing React gives retailers the option of the Next.js framework, which can speed up development. Next.js is flexible and includes components to help developers build full-stack applications quickly. It can also add powerful features, such as server-side rendering (SSR) and static site generation (SSG).

But regardless of whether the custom frontend solution is built in React or Angular, retailers will see many benefits, including:

• Exact branding: A custom eCommerce solution can be fully branded for better market differentiation.
• Vendor neutrality: Absent vendor restrictions, developers can choose the libraries, tools, and third-party solutions they like and adapt quickly when new technologies become available
• Ownership: There is no vendor lock-in nor ongoing license fees, and they are designed to meet specific business goals
• Management: Because retailers are in control of a proprietary, custom system, they can update it and issue new releases to production environments on a schedule optimized to their business needs, so enhancements and bug fixes that are not backward compatible can be rolled out in a safer, more controlled timeframe
• Future-ready: Modern front ends invite other modern technologies like AI, GenAI, agentic AI, augmented reality (AR), virtual reality (VR), and voice commerce.

Custom front end and backend

A fully custom frontend and backend solution offers the most flexibility for retailers with complex requirements or unique business logic. Unlike SAP Commerce Cloud, a custom backend does not enforce predefined workflows, data models, hyperscaler choice, or CI/CD deployment infrastructure. This approach gives retailers the freedom to build a modern platform with composable features from the ground up. It is designed for performance, scalability, and easy integration with existing systems. Most of all, a fully custom solution is designed to maximize competitive differentiators and “secret sauce” for retailers in a way that no solution based on a vendor’s platform can.

A custom backend is typically built using modern frameworks such as Node.js, Spring Boot, Java, or .NET Core and deployed on cloud infrastructure like AWS, Google Cloud, or Azure. The MACH architecture gives retailers full control over their data.

Benefits of a full custom stack include:

• Coordinated performance: Custom frontend and backend systems can be developed in parallel, reducing friction and optimizing request–response cycles.
• Custom data logic: Data structures and API behavior can be tailored to support advanced personalization features, site analytics, or proprietary workflows.
• Streamlined integration: The back end can connect seamlessly with existing ERP, CRM, AI, or third-party platforms using fit-for-purpose APIs.
• Microservices architecture: Different aspects of the backend system can be compartmentalized, scaled, and secured independently to reflect desired SLAs, cost optimizations, and areas of investment.
• Modern implementation practices: The platform can support continuous ingestion and CI/CD delivery pipelines like Kafka, containerized deployment via Kubernetes, and scalable cloud-native infrastructure.
• Long-term flexibility: Custom platforms reduce or eliminate reliance on vendors and are not usually tied to long-term licenses and fees.

This approach is ideal for retailers wanting full control over innovation for a future-ready eCommerce system that aligns precisely with their operational goals.

Using the strangler pattern to gradually roll out new systems

Despite the short timeline until SAP ends support, converting from SAP’s accelerators to a headless front end doesn’t have to be a massive overhaul done all at once. One of the most effective ways to manage the changeover and reduce risk is by using the strangler pattern to roll out the new system gradually, significantly reducing business disruptions.

Here’s how the strangler pattern works:

• Run the existing (legacy) front end and new headless front end in parallel.
• When a customer visits the eCommerce site, requests are routed either to the old system or to the new one using configurable toggles for safety, depending on which pages have been migrated.
• Over time, more of the site transitions to the new front end.
• Post-conversion, the old system is phased out entirely.

Usually, a strangler application modernization plan starts with low-risk pages that have few dependencies, such as the contact us page, FAQ, and terms and conditions. Once those are working smoothly, and both session handling and user state management have been addressed, the conversion team addresses the next set of migrations: home page, product detail pages, search results, and landing pages. Then, once those portions of the new site are stable, pages like the cart, checkout, and user accounts are moved.

The strangler pattern supports CI/CD during SAP Commerce Cloud modernization. It also allows developers to collect feedback before accelerator templates are fully retired. Furthermore, developers can analyze how the system performs in high-impact areas, test new technologies, monitor user behavior, and make refinements throughout the migration.

The digital transformation in retail is already happening. Are you ready for what comes next? Check out these four must-have components of digital transformation for retailers.

Download now

Removing technical debt from the OCCv2 API

Upgrading to composable commerce with one of the SAP backend solutions is the ideal time to optimize the OCCv2 API. This is the primary communication connection between the headless frontend and the backend of the eCommerce system. It is also capable of many other tasks. As a result, it carries years of technical debt: old endpoints, inconsistent logic, and features/customizations designed for legacy software or devices. These limit the capabilities of the headless front end.

Optimizing the OCCv2 API streamlines connections and builds a solid foundation for the future. It provides the opportunity for retailers to:

• Start by reviewing existing API calls and removing old endpoints
• Add new endpoints that are purpose-built for the features and workflows of the new front end
• Make sure that API calls support custom logic added to the SAP Commerce platform
• Install GraphQL APIs for faster, more flexible data delivery
• Focus on ways to improve speed in the most important parts of the user workflow, such as checkout, login, and the cart

The results of OCCv2 optimization are noticeable. Pages load faster, and development cycles are better supported. Security also improves, as does integration of third-party services and support of omnichannel environments. OCCv2 optimization also gives developers a chance to reimagine the eCommerce storefront experience, which can lead to time-to-market and customer-facing enhancements that improve the bottom line.

Meanwhile, developers often identify additional technical debt in the legacy SAP Commerce platform during OCCv2 API clean-up. Examples include custom code that does not adhere to SAP best practices, code duplication, unused code, and business logic that is not optimized. This leads to even more improvements, which enhance the health of the SAP Commerce Cloud solution.

Session management and SEO concerns

Running two front ends side by side during the transition is sometimes necessary, but it creates problems with session management and SEO. Users should not be aware that they are transitioning between two different front ends while they are shopping, so session management must remain persistent. Regardless of the path forward from SAP accelerator templates, both the old and new front ends must persist user login — with a user’s history intact and items still in the cart — until the old site is phased out.

Maintaining a seamless user experience requires:

• Centralization of session and authentication logic to avoid duplication
• Sharing cookies or tokens across both front ends
• Ensuring headers, footers, and other elements remain the same on both sites

SEO is another concern. Modernization can affect page structure, URLs, site metadata, search rankings, and organic traffic. Therefore, developers should map out legacy and new URLs with 301 redirects. This preserves metadata, structured content, and page crawlability. URL mapping should be refreshed with each release to account for the next set of pages being converted with the strangler pattern.

With session management and SEO issues in check, migration becomes smoother.

Examining a custom eCommerce system

As one retailer discovered, converting from an SAP legacy commerce platform to a composable architecture achieved many business goals. The company, a large building materials supplier, had three websites, and each was uniquely branded. The company had been using legacy SAP UI accelerator templates that shared some code, but they were built in isolation. The result was an inconsistent user experience across the sites. Nevertheless, each website needed to maintain its branding as the user experience was improved.

The retailer contacted Intellias to develop a new eCommerce platform. Using APIs and microservices, we unified a new backend system with the frontend sites. This gave all three sites access to the same backend data and allowed them to share 85% of the same code.  To meet the client’s needs, we:

• Created a custom, headless frontend system in React with a shared library, reducing the amount of code for each site while allowing all three sites to retain their unique identity
• Installed GraphQL API layers for real-time data on demand to each site’s front end
• Built backend microservices using Kubernetes, with real-time data flows powered by Kafka

With the new headless system in place, the client was able to reduce overhead, and future development became easier. Our developers were able to add new features and services without disrupting the entire system or impacting customers.

The new websites improved the user experience and integration with third-party services. The time it took for our client to launch a new site was also reduced from many months to just six weeks. With our help, the retailer reduced the cost of adding a new branded site by 83% and achieved zero-downtime releases during the first rollout.

Future development

SAP’s decision to sunset its legacy UI accelerators has triggered a needed conversation about frontend architecture. For retailers still using accelerator templates, change isn’t optional, but it doesn’t have to be painful. The need to replace legacy systems is forcing retailers to rethink how eCommerce works. Companies that migrate data to cloud infrastructure, modernize APIs, and develop a composable storefront can adapt and better serve customers. Whether the choice is Alokai, SAP Composable Storefront, or a custom solution designed by Intellias, they’re preparing for what’s next. A phased plan, cleaning up technical debt, and staying focused on session and SEO continuity will help retailers migrate with less risk as they navigate the changeover confidently.

Contact Intellias and let us help you migrate your SAP accelerator templates to a custom headless frontend eCommerce solution that’s ready for AI.