Headless Commerce

Headless commerce is growing in popularity, and for brands, it provides more ecommerce platform options. Let’s look at the ins and outs of the headless commerce approach.

7 Retail Strategies to Overcome a Growth Plateau

What is Headless Commerce?

Headless commerce architecture is the decoupling of the front-end presentation layer of a website from the back-end ecommerce functionality. Developers can utilize their front-end technology of choice to deliver high-quality content experiences, and plug in an ecommerce solution on the backend that manages all commerce functionality.

Ecommerce platforms in this model serve up PCI compliance, security, fraud management and inventory management that can also connect to larger, key infrastructure points such as ERPs, PIMs, OMS and POS.

For brands, it’s easy to see how headless commerce can provide more options when it comes to ecommerce platforms. For experience-focused brands like lifestyle products, direct to consumer (DTC) brands, and brands relying heavily on influencer and native advertising, a content-led or experience-led strategy like headless commerce is often a no-brainer.

French collage person working headless payment security bigcommerce
I'm ready to start building or already have my own ecommerce store.
Try BigCommerce
I have questions and would like guidance from an ecommerce expert.
Talk to sales

Headless solutions enable brands to make changes quickly to stay current, which is vital in today's retail landscape. Businesses are competing for mindshare and battling the rising costs of customer acquisition.

At BigCommerce, we've decoupled the presentation layer from our commerce engine, giving brands the freedom to simultaneously run multiple stores across various front-end solutions — all from a single BigCommerce account.

The core components of our SaaS platform are open to extension and connection to any other environment, so you can increase efficiencies and reduce bottlenecks.

Not all platforms offering headless are SaaS and offer the benefits of PCI compliance. Our headless approach provides exceptional DDoS protection and industry-standard PCI compliance.

Let's look at the three models for structuring an ecommerce business.

3 Models for Structuring Ecommerce

The state of ecommerce affairs has resulted in three main ways businesses go after increased online share:

1. Monolithic.

This is where ecommerce started, in the days when hardware and software were inextricably linked. For instance, if you buy IBM hardware you must use IBM software. The industry has since evolved from this model.

2. Commerce-led.

This strategy uses a commerce platform front-end for UX and checkout, but APIs for data orchestration across a more robust infrastructure.

Businesses then often implement a PIM, ERP and OMS for product information management, accounting and customer integration, and inventory management across channels.

Businesses using this model are typically using SaaS or open-source technologies.

3. Experience-led.

This strategy decouples the ecommerce platform from the presentation layer, so businesses can use popular content management systems (CMS) like WordPress, digital experience platforms (DXP) like Drupal, progressive web apps (PWA), or custom front-end solutions for unparalleled experiences that increase brand value perception and drive to checkout.

In this model, the ecommerce platform provides PCI compliance and inventory management — and can be connected to additional systems like ERPs, PIMs, or OMS tools via APIs.

Headless Commerce vs. Traditional Ecommerce

Flexibility is the impetus behind a move to new ecommerce models.

Because the customer-side of the site is decoupled from the technical-side, the headless model is able to offer businesses an unparalleled level of flexibility, which is vital in today's market.

This flexibility allows brands to create a unique customer experience on the frontend.

1. Traditional ecommerce.

The most traditional ecommerce model is the monolithic model mentioned above. Many brands still use a monolithic strategy, and many agencies still recommend it for enterprise and well-established businesses.

The downsides to a monolithic strategy are slow go-to-market timelines and high development costs. This delays innovation.

Upsides to a monolithic model are full platform control for the IT department — which may come in handy if an ecommerce strategy or site experience needs extreme customization.

2. Headless ecommerce.

Headless commerce meets businesses where they need commerce functionality. Brands can deliver API-driven experiences through a CMS, DXP, application, device, or custom frontend — with BigCommerce powering the commerce engine.

With headless, brands can create commerce experiences in other platforms using powerful APIs. At BigCommerce, the core components of our SaaS platform are open to extension and connection to any other environment to increase efficiencies and reduce bottlenecks.

From highly customized react.js or angular sites to a CMS, it's possible to integrate even the most complex commerce requirements with beautiful work. Brands don't have to compromise content to combine it with agile, flexible ecommerce.

Commerce-led or commerce-first models use APIs for data orchestration and give relative control to IT teams for infrastructure connectivity. On a SaaS platform, the number of API calls available is important to making sure this functions properly.

Open SaaS is a SaaS platform architecture choice. It includes the following:

  • High or unlimited API call volumes.
  • Multiple endpoints.
  • Well-documented developer documents.
  • A heavy focus on API development in product roadmap make.
French infographic user experience storefront design api bigcommerce

Benefits of Headless Commerce for Online Merchants

There are multiple benefits to using both a commerce-led or a content-led ecommerce strategy.

Content- and experience-led strategies using headless commerce can provide brands with:

  1. Advanced technologies to create visionary, fast websites.
  2. Flexibility and familiarity for developers.
  3. Complete ownership over site architecture
  4. Marketing effectiveness for innovation without hurting back-end processes.
  5. Speed to market for international and omnichannel GTMs.
  6. Conversion rates and lower customer acquisition costs.

Additionally, headless commerce opens up a world of possibilities with brands that are looking for a content-led strategy to begin with. There are now truly no limitations to the customizations that can occur in the digital ecommerce space.

1. Advanced technologies to create visionary, fast websites.

In a headless environment, brands can test new technology. Because the front-end is decoupled from the back-end, developers are free to create as they please instead of being tied to the confines of a traditional CMS.

The frontend or the ‘head’ of most ecommerce websites is the theme or template that controls what customers see. Headless allows for more flexibility in content delivery because you can connect a CMS, DXP, or Internet of Things device (IoT) that is specifically designed for creating content- or experience-led commerce. You can then swap out the front-end without affecting the backend operations.

At BigCommerce, the GraphQL Storefront API makes it possible to query storefront data from within a Stencil theme or remote site. This means information previously only available on the backend via Stencil’s template logic can now be accessed via front-end JavaScript.

A headless ecommerce platform houses content centrally and is able to deliver it anywhere via API. This method allows for a much faster delivery than traditional ecommerce platforms and lends itself to a better customer experience.

2. Flexibility and familiarity for developers.

Headless commerce enables brands to choose the ecommerce platform that works best as the engine for their online store while also working with the frontend of their choice, be it a CMS, a DXP, a PWA or a custom solution. 

BigCommerce has made it easier for developers to create custom headless solutions (and easier for merchants to discover and onboard them) with our Channels Toolkit. It allows merchants to both find and manage headless storefronts right from the BigCommerce control panel—reducing technical list and saving developer resources. You can learn more about how it works here

If a development team has a certain technology or programming language they’re comfortable working with, headless allows them to keep what works with their workflow while streamlining their processes and developing efficiencies.

3. Speed to market for international and omnichannel GTMs.

Combine all of the advantages above and now apply them to the process of launching in new geographies or launching micro-brands.

Once you have the system setup, a headless solution is easily replicable across the board, optimized for international SEO and connected to the overall data orchestration infrastructure.

4. Conversion rates and lower customer acquisition costs.

Customer acquisition costs are rising for a number of businesses due to an increase in paid advertising.

Headless is an effective way of reducing these costs because your brand can use a content- or experience-led strategy to draw in organic traffic instead of relying on paid advertising. Dynamic and smooth customer experiences also help increase conversion rates.

5. Complete ownership over site architecture.

With headless, some of the parts of the system are decoupled (the frontend from the backend). On a headless platform, the content management application and content delivery application environments are separated for greater control.

One reason brands turn to headless is because they already have a frontend solution they’re happy with, and they just need more from their backend system.

For example, if they were on WooCommerce, they might have outgrown the ecommerce functionality of the plugin, but still want to keep their carefully crafted WordPress site. Or if they were using Drupal on their content-driven website and wanted to start selling for the first time, they would need to find a way to connect it to a commerce engine. Headless can allow them to keep what works and add or upgrade what doesn’t.

Headless Commerce Use Cases

Whether you prefer WordPress, Drupal, Bloomreach, Adobe Experience Manager or other CMS/DXPs, PWAs, or have your own custom built solution with leading technologies like Gatsby — headless commerce still works in just about any use case.

All you need is an API connection to decouple the BigCommerce presentation layer and then plug the platform in to where you need it to work.

The most common reasons for using a decoupled SaaS ecommerce platform in combination with a separate frontend solution are:

    • PCI Compliance mitigation: Less work for IT teams, as the SaaS provider takes on the risk.
    • Checkout security and fraud protection: Same as above. Less work for IT teams as the SaaS provider takes on the risk.
    • Open architecture and extensibility: Utilize pre-built integrations with ERPs, CRMs and more, or custom build your own with additional APIs and SDKs.
    International french infographic headless multi platform bigcommerce

    1. Custom solutions.

    For many, the reason to choose headless is because they have big ideas that no one system can provide out of the box. Maybe they’ve found the customization they need by working with open source platforms in the past, but couldn’t handle the long development cycles and maintenance.

    Headless can allow them to keep the customization and lose the cost and upkeep. Or maybe they’ve worked on SaaS, but found it was limiting their innovation. Headless can provide them the open SaaS experience that’s the best of both worlds. APIs enable the flexibility they need to think beyond the limits of any one platform or technology and seamlessly connect systems in a more modular fashion. BigCommerce makes it even easier to discover, test, and onboard headless solutions right from the Channel Manager through our Channels Toolkit. 

    Being innovative and delighting customers with unique and compelling digital experiences can make or break an ecommerce business. Headless can make it easier to customize and pivot their site to stay on the cutting edge.

    2. Content Management System (CMS).

    When the headless approach is paired with a CMS, it makes for a powerful combination. In these cases, the ecommerce platform is decoupled from the presentation layer, so a brand can use popular CMS solutions like WordPress, DXPs like Drupal, or custom frontend solutions for unparalleled customer experiences that increase conversion.

    In this model, the ecommerce platform provides PCI compliance and inventory management – though can be connected to additional systems like ERPs, PIMs, or OMS tools via APIs.

    WordPress.

    WordPress is the CMS of choice for more than 25 million websites around the globe.

    Historically, combining ecommerce with the power that is WordPress’s content solution has been difficult.

    WooCommerce was for a long time the only serious player in that market. However, WooCommerce’s drag on site speed as well as high-cost for security and implementation (WooCommerce is an open source solution) have pushed would-be users to lower-cost SaaS ecommerce platforms.

    With BigCommerce’s launch of the BigCommerce for WordPress plugin, there is now a scalable, SaaS solution available for the WordPress brand.

    BigCommerce also partners with WP Engine and Nexcess for unparalleled WordPress hosting support.

    “Razoyo is excited to be involved with BC [BigCommerce] partnership from several aspects. We believe the future of headless commerce rests in the ability to marry an easy to use CMS system with best in class e-commerce capabilities. We feel the BC4WP path is exactly what content rich, product focused merchants are looking for.” 

    — Jason Boslow, Business Development and Sales Manager, Razoyo

    Drupal.

    Drupal is considered a leading enterprise CMS solution.

    One of the main reasons why Drupal is preferred by enterprise organizations is its security. Drupal is designed for custom development.

    Whereas in the WordPress community, folks like to use plugins (hence the BigCommerce for WordPress plugin), those in the Drupal community like to custom build. As a result of custom build versus plugins, Drupal often doesn’t have the same site load lag times as WordPress — and it can handle a much larger volume of content. Other than that, some designers, developers and editors just plain prefer Drupal over WordPress.

    BigCommerce partners with hosting providers Acquia and Pantheon to deliver a world-class headless commerce experience on Drupal. In addition, a connector between Drupal and BigCommerce has been built by partner Acro Media.

    “The WordPress and Acquia integrations with BigCommerce certainly stand out for marketers. As decoupled and headless commerce solutions become increasingly popular for marketers to deliver dynamic content across many devices, the demand for a rock solid back-end platform capable of supporting a larger number of API calls becomes even greater. From both a cost and performance standpoint, BigCommerce is one of the best options to utilize for this type of setup.”

    — Alec Berkley, Channel Sales Executive, Silk Software

    Adobe Experience Manager.

    Adobe Experience Manager (AEM) brings together a CMS and digital asset management (DAM) in a single place. It’s a comprehensive solution for building websites, mobile apps, and forms, directly alongside marketing content and assets. It has native connections to Adobe Creative Cloud, making it easier to get content to market faster and create the personalised experiences.

    AEM features a CMS, DAM, digital enrollment and forms, and managed services. Together they offer a number of benefits.

    • Create faster with native Creative Cloud connection: Make it easier for creatives to create, marketers to approve and publish, and both teams to work together better.
    • Do more with smarter digital asset management: Save time by editing, optimising, and delivering them, too — all from one platform.
    • Eliminate tedious tasks with asset automation: Use AI to automate tagging, cropping, workflows and distribution — doing in minutes what used to take hours.
    • Engage more customers with rich media delivery: AEM’s AI and machine learning brings hidden opportunities and answers to everyone with the click of a button.
    • Build Lifetime Value: Deliver digital experiences over the lifetime of your customer that build brand loyalty and drive demand.
    • Be Consistent Across Channels: Deliver amazing content across websites and mobile, to in-store and beacons.
    • Get Timely and Personal: Deliver and manage experiences that are responsive, relevant and social.

    BigCommerce for Adobe Experience Manager (BC4AEM) is a full-featured headless commerce integration built by TA Digital, specifically for the DXP. It can enable brands to do all of the following:

    • Integrate Commerce and Experience: Build immersive sites with the Adobe Creative Suite, building on top of BigCommerce products and user data to deliver tailored experiences.
    • Page and Category Creation: BC4AEM populates Product Category Pages (PCPs) and Product Detail Pages (PDPs) upon syncing BigCommerce to AEM, helping reduce time to market.
    • Built for Business Users and Marketing Teams: Business users can sync and manage product data within AEM, allowing marketing teams the ability to further augment as needed in AEM.
    • Reduced Burden of PCI Compliance: Enhanced ecommerce security and peace of mind. Increase conversion and security with BigCommerce’s fully-embedded checkout. Deliver the fast, responsive checkout shoppers expect, while reducing the burden of PCI compliance.

    Sitecore.

    Sitecore is another leading CMS used by organizations globally to create personalised digital experiences.

    iMedia, a leading digital agency, created a package-deployed plugin BigCommerce for Sitecore that allows businesses to deploy the rich content experience of Sitecore with the ecommerce power of BigCommerce.

    “Both Sitecore and BigCommerce are leaders in their respective verticals. Knowing that an enterprise headless commerce option is available should arm not only technologists but marketers with a strong strategy to help deliver more revenue to the bottom line.”

    — Brian McGovern, Partner, Client Services, iMedia Inc.

    3. Digital Experience Platform (DXP).

    A DXP is a type of software that enables companies to quickly digitise and provide an improved customer experience. Combining a DXP with a headless CMS solution results in a strong foundation.  

    The value in this partnership comes from the flexible API-driven content and its capability to integrate with other services. This combination allows developers and marketers to work separately, and also leaves room for additions and edits without affecting the project flow.

    Let's explore some examples of DXPs using the headless approach.

    International french infographic headless use case bigcommerce

    Bloomreach.

    Bloomreach is a DXP.

    Large, enterprise retailers are a perfect fit for this headless ecommerce CMS solution. Bloomreach offers a microservice / headless architecture and APIs to reduce IT complexity in powering an optimal customer experience from homepage to checkout.

    If you are running a complete omni-channel business, Bloomreach’s microservice architecture and partnership with BigCommerce for a headless commerce solution is worth looking at.

    4. Progressive Web Apps (PWA).

    Progressive web apps (PWA) are web applications that use the latest web capabilities to deliver a native app-like experience to users. PWAs are web applications that are regular web pages or websites but can appear to the user like traditional applications or native mobile applications. PWAs combine the capabilities of websites and mobile software to create an immersive user experience that can lead to higher conversion rates and more time spent on site.

    These technologies are becoming more valuable for businesses to have as more and more customers are shopping on mobile devices. 

    Big brands from Airbnb and Twitter to BMW and Starbucks are already using PWAs and seeing big results.

    BigCommerce is committed to providing merchants the capability to leverage PWAs. We have several upcoming product launches intended to make this sophisticated tech more approachable and have an almost native feel within our platform. These will enable developers to build workable solutions faster and more intuitively.

    Here are a few ways brands can leverage PWAs on the frontend in a headless implementation.

    Deity.

    In October 2019, this microservice-oriented platform, launched DEITY Falcon for BigCommerce. This gives BigCommerce merchants the ability to use PWAs on the frontend to deploy highly-engaging, native app-like experiences on both desktop and mobile devices. DEITY Falcon for BigCommerce is the first direct PWA front-end available within the BigCommerce platform.

    Vue storefront.

    Vue Storefront allows merchants to build engaging user experiences across all devices. It easily connects to all major ecommerce backends, including BigCommerce. The solution uses PWAs to power the rest of the experience and allows brands to improve their UX without making changes to the backend.

    Unlocking Flexibility: Examples of Headless Commerce in Action

    First of all, it’s often very difficult to tell if a brand is using headless commerce as a strategy just by looking at it.

    This will only become more so true as headless ecommerce becomes more mainstream and loses its URL redirect to a checkout page.

    For the time being, let’s look at a few headless commerce examples.

    1. Burrow.

    Headless commerce category burrow

    Burrow is a direct-to-consumer furniture store, founded specifically to eliminate the hassles of traditional furniture shopping. They designed a modular product that was stylish and comfortable and could be affordably shipped to customers. Their idea resonated, and after launching in 2017, they saw $3 million in sales. This was great for their business growth, but it also meant they were already outgrowing their ecommerce platform.

    In addition to needing a powerful backend platform that could grow and scale with them, Burrow also needed to be able to customize their site quickly and easily. Their ideal solution was one in which templates didn’t limit their creativity and developers weren’t needed to make simple changes.

    Burrow found they could solve all of their challenges by choosing BigCommerce as a scalable backend system. The reliability and lack of maintenance frees up their team to work on more marketing-focused updates to the site. They are able to use a custom CMS on the frontend so that they aren’t too constrained by templates and can create the kind of experiences they want for their customers.

    Since launching with their headless solution, Burrow saw a 30% increase in conversion rate in only two months and a 50% increase in site speed and performance.

    2. Larq.

    Headless commerce category larq

    LARQ is a seller of self-purifying water bottles, designed to solve many of the issues people have with traditional water bottles. The company is highly focused on sustainability and raising money for clean water initiatives.

    When seeking an ecommerce platform, the LARQ founders knew they wanted a platform that could not only scale with their growth but provide flexibility for customization. They wanted advanced features for things like multicurrency, especially as they were launching multiple international sites for customers.

    Headless could provide the customization that LARQ needed, such as giving them complete control over the content and customer journey. LARQ’s sites are run with BigCommerce as the ecommerce engine on the backend and a custom solution built with React on the frontend. This enabled them to control their regional sites (currently US, EU, UK and Canada) on one single domain.

    LARQ was able to launch their ecommerce site on BigCommerce in just two months. Since launching, they’ve seen a 400% increase in revenue year-over-year and an 80% increase in conversion rate over three months.

    3. Louise Kennedy.

    Headless commerce category louise kennedy

    Irish fashion designer Louise Kennedy uses WordPress on the front-end to host their products, blog content and merchandising.

    For checkout, they outsource PCI compliance, checkout uptime and security to BigCommerce.

    This also allows them to use integrated payment options like Amazon Pay, PayPal One Touch, Apple Pay and more without having to do the interaction work themselves.

    This saves time, saves money, increases security and allows for fast innovation and campaign launch to remain competitive in the industry.

    4. Carluccio’s.

    Headless commerce category carluccios

    Carluccio’s built a presentation layer (i.e. the site experience) on WordPress, then used the BigCommerce for WordPress plugin to implement a headless commerce solution.

    This allows a customer to stay on the same site (no subdomain) throughout the experience.

    5. Canvas 1839.

    Headless commerce category canvas 1839

    If there’s one industry that’s blowing up right now — and facing some unique challenges in online selling — it’s CBD. Because of the shifting legalities of selling cannabidiol products online, these businesses have faced greater scrutiny from ecommerce platforms, payment providers, shipping services, and everyone in between. Canvas 1839, an Austin-based company selling high-quality CBD creams and lotions, is no stranger to these intricacies.

    Like some of the other use cases we’ve talked about, Canvas 1839 soon found they were constrained by their own growth. Their platform, Shopify, also limited them in other ways that were specific to their industry, including what payment providers they could use.

    In addition to wanting a platform that was vocally supportive of CBD merchants, they were also interested in a headless model because they wanted a quicker, more efficient development cycle for both their developers and marketers. They wanted their developers to be able to use tools like Gatsby, React and GraphQL to build the engaging front-end experience, while marketers could easily build and manage the content-heavy pages — all fully integrated to the rest of the website.

    Canvas 1839 launched on BigCommerce using a PWA built on Gatsby, giving them the benefits of a CBD-supportive SaaS ecommerce platform as well as the freedom for innovation on the frontend.

    Conclusion

    In our survey with Retail Dive, 60% of participants identified two strategies as the most important to managing or reducing customer acquisition costs: creating content to publish via their own channels and improving their overall digital experience.

    As we continue to move into a relationship marketing model that’s informed by content, blended with commerce, and based on experience, you have to be extremely agile and highly adaptable to thrive.

    After all, the only constant is change, and you’re going to have to get really comfortable with it because it’s coming whether you like it or not.

    SaaS ecommerce solutions enable you to quickly adapt to change while achieving a lower total cost of ownership, a faster time to market, greater security, and everything you need to deliver a world-class online shopping experience. Open SaaS and headless are a way you can achieve all of this with added flexibility and choice when it comes to what frontend you use.

    If you want to learn more about how headless commerce is being used to drive content-led and experience-led online stores, check out the BigCommerce headless commerce solution.

    Ecommerce Frequently Asked Questions

    What does headless commerce mean?

    Headless commerce is the decoupling of the front-end presentation layer from the back-end ecommerce solution that manages all commerce functionality.

    What is a headless approach?

    A headless approach is about using different technologies for the frontend and backend of your ecommerce website to ensure you’re maximising the use of content while also using a best-in-class ecommerce platform on the backend.

    What are the differences between headless and headless CMS?

    Headless describes the approach of separating the front-end presentation layer from the back-end ecommerce solution that manages all commerce functionality. A headless CMS also separates the frontend and the backend, so it stores files but also allows for editing and equips developers with an API to add content into the frontend. 

    Contentful is a headless CMS built to create omnichannel digital experiences. With Contentful, marketers can control the content while developers can use their own tools and frameworks.

    WordPress is an open-source CMS that uses plugins to create a custom experience. You can scale your business with WordPress on the frontend and let BigCommerce handle catalog management, processing payments, and managing fulfillment logistics on the backend.

    VIEW MORE
    How is BigCommerce headless different from Magento headless?

    At BigCommerce, our headless technology empowers content-rich commerce for shoppers. Our API-driven platform is fast enough to support syncing large amounts of data quickly, and we provide 99.99% uptime.

    Advanced store customization for Magento Commerce can be costly. With Magento, adding on new extensions post-launch can be heavily involved, especially for complex and customized stores.

    How does headless commerce work?

    Headless commerce works by taking open SaaS one step further and completely decoupling the presentation layer of the ecommerce platform. API connectivity and robustness is important in ensuring data orchestration across the decoupled systems.

    Are there downsides to headless commerce?

    There are many advantages to headless commerce, but it's not without its disadvantages. Since headless decouples the frontend from the backend of an ecommerce platform, you have to pay for two different solutions. If you're migrating from a monolithic solution to headless, it might also cost a bit to make the switch.

    In many ways, headless commerce makes life easier for businesses. But, managing different parts of the website can become overwhelming depending on the resources you have. It may take additional developers to create the site you desire.

    Does every ecommerce store need a headless solution?

    No, not every ecommerce store needs a headless solution. Many brands still use the most traditional ecommerce model: the monolithic model. Many agencies still recommend a monolithic strategy for enterprise and well-established brands.

    While headless might not be the right fit for every business, for some, it’s a solution that can solve previously unsolvable challenges. A merchant should consider headless ecommerce if:

    • It's a content-driven brand.
    • It's experience-driven and wants the ability to implement personalisation, AI, or AR capabilities.
    • It's looking to create seamless digital experiences across multiple touchpoints and devices.
    • It has multi-site or international selling needs, serving up multiple front-end experiences powered by the same backend.
    • It already uses a CMS and wants to add commerce.
    • It's already selling online and has a separate site for content and needs to be able to merge the two.

    Browse additional resources