Skip to main content
Build the future with Agentforce at TDX in San Francisco or on Salesforce+ on March 5–6. Register now.

Plan Your Headless Commerce Implementation

Learning Objectives

After completing this unit, you’ll be able to:

  • Describe a typical headless commerce use case.
  • List three benefits of converting to headless.
  • List three potential headless tools.
  • Explain when you’d choose a headless approach.

Introduction

Cloud Kicks Corporation is expanding fast to meet shopper demand for their amazing and ever-expanding sports apparel offerings. Thrilled by his expanding role, Vijay Lahiri, senior Cloud Kicks developer, looks to headless commerce early adopters for inspiration. These companies are more about technical maturity than size, and Vijay is keen to move into that arena. This level of technical investment can result in an increase in short-term costs.

Headless means the expansion of IT and the development team, which can result in short-term costs.

Generally, the best candidate for headless is a company with a solid IT department that has a strong do-it-yourself attitude. Like Cloud Kicks, such businesses often have months-long development queues and ambitious creative and marketing teams that are eager to roll out new designs, copy, and templates on the front end.

Headless gives large merchants with a lot of developers, or Salesforce partners who specialize in more extensive merchant implementations, the technical flexibility they crave. And it can generate the return on investment required to offset the added development costs of implementing headless commerce. Using sample apps and reference apps as starting points can help speed development.

The front end of any headless implementation is typically the responsibility of the merchant. As Vijay and his team begin to develop on the headless platform, they also need to include resources to manage security, developer operations, hosting, and compliance.

Start With Storefront Reference Architecture (SFRA)-Style Development, Then Move To Headless

Vijay compares headless with SFRA-style development, where Salesforce provides the basic application storefront cartridges, upon which LINK, third-party, and custom cartridges stack and run.

What are LINK cartridges? Developed by members of the LINK Technology Partner Program, they are pre-integrated solutions that are market-compatible with Salesforce B2C Commerce storefront applications. PayPal and Bazaarvoice, for example, provide pre-integrated payment processing and product rating LINK cartridges, respectively.

SFRA delivers both front- and back-end functionality. For some storefront applications, Cloud Kicks might want to retain this architecture. So Vijay is happy to know that he can start with SFRA for the fastest time to market, then mix and match between SFRA and headless as business needs dictate.

Cloud Kicks wants a quick time to value, but they are also forward looking. They want to sell anywhere and everywhere to shine more brightly than their competition. This approach gives them the quickest launch possible, but also the flexibility and future headless architecture to deliver ongoing storefront innovation for now and for a prosperous future.

Start Building Headless First with the PWA Kit and Managed Runtime

With the flexibility of the B2C Commerce platform, Vijay knows there are other ways to move to headless. Instead of starting from scratch, he can use Progressive Web App (PWA) Kit and Managed Runtime to enable a headless approach that unlocks front-end speed, with the modern tooling his developers need.

What is PWA Kit? PWA Kit is a framework for creating storefronts with React that includes these features.

  • Project templates, including a customizable storefront that implements core ecommerce flows from home page to checkout
  • A rendering system that works on both the server side and client side—and handles hydration (the process of transferring rendering from server to client)
  • A routing system that allows you to inject data from the Commerce API into your components
  • Utility functions and scripts for automating routine development tasks
  • Integration with the B2C Commerce API and Open Commerce API (OCAPI).
  • Support for essential progressive web app features

PWA Kit and Managed Runtime provide a headless solution for B2C Commerce shoppers. Vijay and his team can use PWA Kit’s project templates and the Salesforce Commerce API to go live sooner. He can customize the PWA Kit’s prebuilt React components and offload runtime management to focus on innovation and user experience. He has the choice of coding in JavaScript or TypeScript. This provides the infrastructure to host, deploy, secure, scale, and monitor the PWA Kit and front-end applications, ensuring enterprise scalability with a historical 99.99% uptime for global customer success. 

What Are the Benefits of Moving to a Headless Approach?

Vijay’s team is ready to switch to headless commerce. Here are some benefits that make it worth the effort.

  • Better employee adoption: Everyone on the team can easily access and update the front end without advanced developer skills.
  • Fewer steps to front-end deployment: Ecommerce website changes are no longer routed through the IT team. Headless commerce users can deploy changes with fewer steps.
  • Time savings across IT: Because non-developers can commit changes to the front end without having to submit tickets to the IT team, developers can focus on more critical work.
  • Faster time to market: Merchants can launch new front-end experiences quickly, accelerating reactions to market with minimal costly back-end development.

Many merchants who choose to invest in headless commerce have already established mature software engineering practices such as continuous integration and continuous deployment (CI/CD). Adopting headless commerce lets them further their engineering practices while also experiencing the above benefits.

Headless means an improved shopper experience, which results in higher customer satisfaction rates.

Use Case: Artificial Intelligence (AI)

Vijay’s biggest interest in headless is a platform that can handle digital experiences across all touchpoints using AI. He wants to build a custom mobile app for B2C Commerce that easily scales using Heroku to reach shoppers wherever they are. He wants the app to provide an engaging storefront experience that celebrates the Cloud Kicks brand positioning and promotes shopper delight based on live shopper and industry data.

He also wants an in-store app that will empower store associates to unlock inventory across channels, and offer personalized services to loyal shoppers. Most importantly, he wants both the customer-facing mobile app and the store associate in-store app to share the same back-end platform.

Choose Development Tools

Vijay has a lot to think about. He needs to research the tools he’ll need to build this new environment. Here are some of them.

  • The node.js environment: He’s already familiar with npm and expects to use node.js.
  • Source control: He uses a version control system to store his source code and to facilitate storefront application deployment. Github is his system of choice.
  • A B2C Commerce sandbox: He has access to on-demand sandboxes for application development and testing. He’ll need Account Manager access to this platform.
  • Code editing tools: He uses Eclipse for some applications and Visual Studio for others. He plans to develop his headless app with open web standards, so he’s open to other IDEs.
  • APIs: He’s evaluating Heroku for rapid, scalable application development in any language.

How will these tools work together with this new architecture? What can he do now to get ready for the change? These are some of the questions he needs to answer as he and his team learn how headless commerce can propel Cloud Kicks into the future.

Define Roles

Another change he needs to consider is specialization. It’s good to recognize that storefront development and design are two different jobs. Rarely does one person do both. With headless commerce, creative teams can focus on optimizing the shopper experience to improve engagement and conversion. Developers, meanwhile, can prioritize back-end enhancements to make processes faster and richer and the data more varied.

Let's Wrap It Up

One thing is certain: Headless is here to stay. Many companies in Vijay’s industry will evaluate headless commerce and build their own headless commerce application.

In this unit, you took a deeper dive on the compelling reasons to convert to headless commerce. You explored a potential application, considered implementation tools, and learned about role differentiation.

What now? Take the final quiz and earn an awesome badge.

Resources

Share your Trailhead feedback over on Salesforce Help.

We'd love to hear about your experience with Trailhead - you can now access the new feedback form anytime from the Salesforce Help site.

Learn More Continue to Share Feedback