Salesforce Headless: How to Upgrade Your Online Store For More Sales

If you’re using Salesforce Commerce Cloud (SFCC) to host your online store, you might be wondering what your options are when it comes to headless commerce.

With SFCC, there are several things you can do to gain more control over the frontend shopping experience for customers.

You can use Storefront Reference Architecture, build an entirely custom frontend layer from scratch, or go with an option in between.

But what if you’re not sure what your next move should be?

Or maybe you’re wondering whether it’s even possible to create the flexible frontend layer your brand needs without opening up overwhelming development issues.

Well, fear not.

Today, we’re looking at all the options for headless commerce on Salesforce ecommerce sites and which one might suit your scaling brand best.

We’ll cover:

• What is headless commerce?
• Is Salesforce Commerce Cloud headless?
• Reasons that brands go headless with Salesforce Commerce Cloud
• Pros and cons of Salesforce headless commerce
• How to go headless with SFCC
• Examples of headless Salesforce stores
• Headless Salesforce FAQs

#cta-visual-fe#<cta-title>Taking your store headless?<cta-title>With Shogun Frontend’s all-in-one Frontend Platform, you can deliver truly exceptional shopping experiences and performance.Learn more

So, what is headless commerce?

First, there are so many aspects to headless commerce that answering this question in detail runs way past what we’ve got room for here.

But the essence of headless, and what makes it so attractive to online brands, is the ability to design flexible, customized frontend shopping experiences without reference to—or total reliance on—your backend commerce system.

This flexibility (largely for design and performance gains) is achieved by decoupling or separating the front and backend parts of your ecommerce site.

For all the headless basics, you can find the foundations (jargon-free!) in our guide to headless commerce.

But let’s get into the next important question:

Is Salesforce Commerce Cloud headless?

Salesforce is famous for its world-class CRM, on top of which sits a dense network of enterprise solutions.

As such, the software giant is associated with big, integrated systems that rely heavily on each other. This happens to sound like the opposite of headless, which is all about the separation of systems.

But Salesforce Commerce Cloud (SFCC), in particular, is headless-enabled or would be considered a headless ecommerce platform.

That is—you can use the platform as a standalone backend for your online store.

This means that using Salesforce headless APIs, you can connect your own custom frontend to their sturdy ecommerce backend functionalities.

You can pair Salesforce’s checkout and compliance capabilities you love with an entirely different frontend layer.

It’s perhaps important to note that what is today known as the Salesforce Commerce Cloud used to be called Demandware until Salesforce acquired and rebranded it in 2016.

As this B2C part of SFCC results from an acquisition, it isn’t built on the intertwined Salesforce CRM (unlike the B2B Commerce Cloud).

As such, it lends itself well to headless commerce.

This is because there aren’t huge swathes of architecture to untangle before the platform can be offered as a viable backend.

Reasons that brands go headless with Salesforce Commerce Cloud

Usually, brands look to go headless when they’re scaling and have outgrown standard themes.

They’re at a stage where they want to add more capacity for rich, unique omnichannel experiences to their stores.

And if you’re on SFCC, you’re well-placed to level up your brand with headless flexibility.

You can take all the great features and functionality that a huge global enterprise platform provider offers and still enjoy the freedom to create richly immersive brand experiences in a fast, code-free frontend environment.

Typically, brands go headless on Salesforce Commerce Cloud to:

1. Break out of the one-size-fits-all confines of pre-built themes

If you’re using Storefront Reference Architecture to create your site, it’s likely that at some stage, you’ll want a little bit more originality and freedom to create the site aesthetic you need.

Going headless allows you to design a unique site that your customers will enjoy spending time on and return to again and again.

2. Increase flexibility

Salesforce does provide some flexibility with its storefront design options.

Storefront Reference Architecture is not just a simple page builder like some major commerce platforms offer.

You can use pre-built modules and templates to create your site, but you can also code your own site design, using the reference architecture as a library to get you started.

However, this doesn’t give you the same level of flexibility that an entirely headless build does. The added complexity layer means you have to know what you’re doing when coding changes.

3. Gain more technological freedom

Salesforce offers some great, market-leading tools and systems, but they’re not going to be suitable for every brand all of the time.

When you go headless on Salesforce, one option available to you is to compose your own tech stack, selecting the technology you need in every area of your online business.

4. Make changes more quickly

Using a separate layer for your frontend delivery means you don’t have to route every single change, update, and rollout through your backend systems.

This means faster implementation of marketing and business decisions and a reduced time to value.

5. Improve customer shopping experiences

All of these reasons for going headless with SFCC can ultimately be boiled down to the same thing—creating a better, richer, more tailored digital experience for your customers.

The more flexible and free your tech stack is, the better you can serve your customers.

#cta-visual-fe#<cta-title>Thinking about going headless?<cta-title>See how Shogun Frontend can help you deliver exceptional shopping experiences and performance.Learn more

The pros and cons of Salesforce headless commerce

Going headless provides enormous opportunities for brands to craft exciting and original customer experiences at a scale to match their ambitions.

But going headless isn’t the right choice for every brand using SFCC.

Let’s run through the strengths and weaknesses to illustrate this point:

Benefits of headless Salesforce

As one of the world’s leading software providers, Salesforce has much to recommend it.

Access to Customer 360

If you use Salesforce Commerce Cloud for your backend services, you’ll also get access to their flagship product, Customer 360 (what Salesforce calls their CRM.)

It is a potent tool, but if you want to maximize its potential, you’ll need to use the whole suite of Salesforce products.

Breathtaking omnichannel experiences

Taking Salesforce headless makes it much easier to create a unified customer experience on every channel.

The site you build for mobile and the content your customers see in your app has to be consistent with your desktop site and other channels.

The framework-agnostic functioning of headless commerce makes this easy to achieve. Simply create your content once and then push it to multiple channels.

PWA Kit and Managed Runtime

Salesforce has launched some new products to support their headless capabilities.

We’ll have more on PWA Kit and Managed Runtime later, but suffice it to say these two packages make it faster and easier to build and support a frontend on headless Salesforce Commerce Cloud.

Excellent support

Salesforce allocates Customer Success Managers to their clients, so you’ll get hands-on support from an individual with a working knowledge of your business.

They will not just help you with technical problems but can also give advice and support on how to get the most value out of SFCC in respect of your unique business goals.

The drawbacks of headless Salesforce

There are also a few downsides. Commerce cloud is not the right solution for every online brand.

SFCC is relatively expensive

Salesforce has priced its platform on the higher end of the scale, probably reflecting its position as one of the world’s leading sales and enterprise software providers.

If you’re using Salesforce’s other products and services, integrating your online store with your CRM and other business management tools, with all the enhanced data and analytics benefits that come with it, may well be worth the expense.

If you’re considering SFCC as a standalone product, you’ll have to evaluate if this is the right solution carefully.

Tied into a wider Salesforce network

SFCC, like all Salesforce products, works best when used as part of a fully-functioning Customer 360 package.

If you’re already using this, it’s not necessarily a drawback.

But if you’re starting out on your Salesforce journey, you should ask the vendor exactly what functionality you’ll be getting access to.

It’s complicated

Compared to some other backend commerce platforms, SFCC is relatively complex.

Salesforce has tried to provide a solution that combines ease of access and a quick setup for your online store with a low-code environment where you have the freedom to do some development work yourself out of the box.

This can be a great setup if you’re used to working with Salesforce systems, but if you’re unfamiliar and attempting to take an SFCC store headless, it can throw up some unexpected obstacles.

How to go headless with SFCC

If you’re already on Salesforce, the benefits of going headless far outweigh the potential drawbacks.

And being able to take your store headless without re-platforming is a massive bonus.

So how do you go about the task? There are three main ways:

1. Use Salesforce’s Composable Storefront

To respond to the increasing interest in composable commerce (see below) Salesforce has launched Composable Storefront.

Composable Storefront is aimed at brands put off by the complexity and ongoing expense of a completely custom build but are still interested in the idea of a composable solution.

Announced in August 2022, Composable Storefront is Salesforce’s new set of tools to enable the use of SFCC as a backend for a headless build.

These tools make it easier for brands to create their own bespoke frontend from scratch.

As the name suggests, it enables a composable approach to headless commerce, giving you more freedom to choose which technologies to use when building out your tech stack.

Composable Storefront comprises two elements: PWA Kit and Managed Runtime.

PWA Kit

This framework allows developers to build storefronts with progressive web apps.

This revolutionary technology is used to build sites capable of much faster load times and a more stable, consistent, and rich customer experience.

With the launch of PWA Kit, brands can now much more easily create their own PWA-based frontend on Salesforce.

Salesforce describes PWA Kit as “an elevated starting point to build and run a Progressive Web App across mobile, tablet, and desktop.”

So, while PWA Kit provides a set of tools, you’ll still need the help and expertise of developers who know how to use them to build an exceptional frontend experience.

Managed Runtime

Alongside the tools to build your frontend, Salesforce has also created a hosting environment called Managed Runtime.

It will host your frontend for you, scaling capacity to meet traffic increases, so you don’t have to self-host your custom-built frontend.

Benefits of Composable Storefront

• Shortens the development process – Compared to a custom build, these tools help brands achieve a composable solution without having to start from scratch.
• PWAs create exceptionally fast sites – Using PWA Kit to create your storefront will dramatically increase your site speed.
• Managed hosting – You’ll have a ready-made solution for your hosting requirements, tailored to the needs of SFCC sites.

Drawbacks of Composable Storefront

• Still relatively complex – even with the help of Composable Storefront, need the help of experienced Salesforce developers to create your online store for you.
• Ongoing costs – As you’ve designed your own storefront, you’re going to have to take care of maintaining it too. This means added developer costs.
• Long lead times – Even though a framework is provided, there’s still plenty of work to do to create the perfect store.

2. Take a composable approach

Composable commerce is so named because when brands go this route, they pick and choose individual pieces of best-in-class software, assembling them into an architecture that suits the specific content, marketing, and business needs of their business.

So every part of your tech stack—from the content delivery network (CDN) to the content management system (CMS), the server-side rendering framework (SSR), or the various integrations and tooling—is put together piece by piece, fitting it all together in a modular way.

This is the traditional way of composing your headless solution.

It means you get all the benefits of decoupling your storefront: more control, increased speed, and richer experiences.

Benefits of a composable approach

• No longer tied into a single platform – Giving you the ability to select the best fit solution for each separate area.
• Total control – Being able to choose every part of your ecommerce solution individually, and retaining technical oversight of it, gives you complete control over your store.
• A unique, fast site – composing a solution to exact specifications will deliver a high-quality, speedy site.

Drawbacks of a composable approach

• Extra responsibility – You will need to select, integrate, and maintain all the modular components of your tech stack.
• Added complexity – Having to maintain a complex tech infrastructure could divert resources away from more business-critical areas.
• Added expense – Every aspect of your composable solution needs to be individually accounted for on an ongoing basis.

3. Use a FEaaS platform

If the above options seem too complex and developer-intensive, a FEaaS (Frontend as a Service) platform provides a simpler way to take your Salesforce store headless.

Shogun Frontend offers a unified platform where brands can create rich, omnichannel customer experiences without the long lead times, complex setups, and technical oversight required for other headless builds.

The platform is designed specifically to meet the needs of modern commerce.

It uses progressive web app technology (PWAs) to create stunning frontend layers or sites that load in a fraction of the time it takes for traditional sites.

And as it’s a platform service, the heavy technical needs of moving to a headless setup are taken off your hands.

Shogun Frontend provides scaling brands with a way to enjoy all the benefits of headless commerce while leaving behind the complex and time-consuming project management associated with it.

Benefits of a FEaaS solution

• Best-in-class technologies – A frontend platform packages software (PWAs, CMS, SSR, etc) in one unified layer.
• Convenience – Your teams can access all frontend capabilities from a single point.
• Make changes easily – A low to no-code environment means marketing and business teams can quickly make changes.

Drawbacks of a FEaaS solution

• Lack of granular control – You’ll lose some oversight on the more fine-grained aspects of your tech-stack
• App reintegration – As with any headless setup, some apps will stop working, and you’ll need to find workarounds or replacements.

Examples of headless Salesforce stores

By now, you’ll have an idea of what’s possible when you take your SFCC store headless.

But if you need a bit more inspiration, here are a few brands that have gone headless with a Salesforce backend platform:

Paula’s Choice

This skincare and beauty brand increased the speed of its site by switching to a headless frontend built on PWA technology.

The added speed gave their conversions a boost too.

According to Mobile Marketing Magazine, the 67% decrease in the time it takes a customer to go from product search to add to cart has resulted in a 46% uplift in conversions.

Their site supports rich images and video as well as guided shopping that helps customers decide which skincare products are right for them.

Under Armour

Getting the look, feel, and overall experience of an online store right is crucial for fashion and apparel brands.

For lifestyle, sportswear, and fashion retailer Under Armour, the ability to quickly deploy high-quality imagery showcasing their products may have been behind their decision to move to a headless setup with SFCC.

George

The clothing wing of the Asda supermarket (part of Walmart in the UK) needed to upgrade its mobile shopping experience and so turned to PWAs to create the desired step change.

The beauty of PWAs is that while they are an ideal solution for a mobile-first world, the technology can be used to build sites that work across mobile and desktop.

A PWA-based site creates a smooth, fast, and continuous experience for customers moving from one channel to another.

Since launching their headless PWA site, George has seen a 31% increase in conversion rates and 20% more page views per visit.

Headless Salesforce FAQs

What is Salesforce Commerce API?

Every headless architecture needs APIs to work.

They are the messengers that carry information and commands between different parts of your ecommerce setup and allow for the separation of the front and back ends.

Salesforce Commerce API is the collection of APIs that Salesforce has developed.

These RESTful APIs allow developers to connect the B2C commerce platform to their frontend of choice.

That could be an online store, but it could also involve a mobile app or other customer-facing interfaces.

Is Salesforce B2B commerce headless?

Yes! Even though Salesforce B2B is a different product offering to B2C (and B2B2C) and has been integrated with their CRM, you can still take Salesforce B2B headless.

What is Storefront Reference Architecture (SFRA)?

Salesforce has put together a set of best practices taken from SFCC stores.

They’ve put them together in a library containing the code base for all the core elements of an ecommerce storefront, allowing you and your developers to quickly add features to your site and customize them to your needs.

SFRA is for those brands who need more customization than a drag-and-drop page builder can provide. It offers a time-saving jumping-off point to design the architecture of your site.

Take your Salesforce store headless

As we’ve covered, there are several ways to take your Salesforce store headless.

But, ultimately, you’re team is the best judge of the most straightforward route to the speed, flexibility, and customer experience gains you are after.

Ahead of jumping into a headless build, you want to make sure you are well-informed on your options and the best ways to prepare yourself for the journey.

When you’ve done your homework, you can confidently build your headless Salesforce storefront in a way that ensures ongoing success.

#cta-visual-fe#<cta-title>Want to see more examples of headless stores?<cta-title>Check out our roundup of some of the best.See more.