User Guide for BIGCOMMERCE models including: Headless Commerce, Headless, Commerce
File Info : application/pdf, 16 Pages, 2.19MB
DocumentDocumentHeadless Commerce Projected to grow at a compound annual growth rate of 20.5% -- reaching $32.1 billion by 2027 -- headless commerce is one of the fastest growing trends in ecommerce today. In this guide, we'll explore the key di erences between traditional and headless commerce, what benefits you can expect from a headless solution, and how our own merchants are reaping the rewards of a headless ecommerce framework. Headless commerce vs. traditional ecommerce: What's the di erence? Making the choice between traditional ecommerce and headless commerce starts with knowing your business needs and capabilities. Let's explore the key di erences between traditional and headless commerce and how to determine which is best for your business. Whichever model you choose, BigCommerce is here to support you. We o er the flexibility to create custom, cutting-edge user experiences through headless ecommerce architecture while maintaining robust, out-of-the-box functionality for traditional commerce setups. What is headless commerce? Headless commerce is the decoupling of a website's frontend presentation layer (which includes elements such as text, colors, styles, images, and buttons) from the backend functionality (pricing, infrastructure, security, checkout, etc). In between the frontend and backend system lives a layer of powerful APIs (application programming interfaces). These APIs act as the middleman between the two systems, allowing ecommerce businesses to plug and play various frontend solutions without the risk of impacting the backend commerce functionality. This means that businesses have full freedom and flexibility to optimize the customer experience through multiple unique storefronts. They can update web copy and images across their site, or even extend these experiences to new channels such as mobile apps, kiosks, and IoT devices. And all the while, the backend system continues to support all commerce functionality. when how In short? You can create and modify unique ecommerce experiences you want and you want. What about composable commerce? Amid ever-changing customer behaviors, trends, and advancements in technology, headless commerce has paved the way for a new level of flexibility and agility. But some businesses have even taken it a step further. Some people have used the terms "headless commerce" and "composable commerce" interchangeably. However, headless commerce is actually a component of the bigger composable commerce umbrella. Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549. Headless commerce refers to the breaking down of an all-in-one commerce system by decoupling the frontend and backend layers to operate independently. Composable commerce, however, every means that component of the tech stack is independent, and can therefore be "composed" to create the most optimal, customized solution for your business. Like a set of Lego blocks, every element of the tech stack is modular and pluggable, allowing businesses to completely tailor the customer experience. In essence, headless technology is a cornerstone of composable commerce, working in tandem with the other principles of MACH (Microservices, API-first, Cloud-native SaaS, headless). What is traditional ecommerce? For many years, the go-to structure for many ecommerce businesses has been an all-in-one monolithic structure, which ties together the frontend and the backend systems. Before headless entered the picture, many brands used a monolithic strategy, and many agencies even recommended it for enterprise and well-established businesses. The benefits? For many businesses, a monolithic ecommerce architecture o ers a quick and easy setup and a faster time-to-market. Many traditional ecommerce platforms o er storefront templates and drag-and-drop features that allow businesses to quickly launch their site. The downside? These monolithic solutions can lack the flexibility and agility for brands that want to innovate on the fly and make quick site changes down the line. Plus, since the frontend and backend are linked together, any changes made to either end can negatively impact the other. But that's not to say a traditional ecommerce solution isn't a good choice for some businesses! If you're looking to get your site up and running quickly, and you don't anticipate needing a lot of customization, a traditional ecommerce platform might be the right move for you. Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549. What are the benefits of headless commerce? Headless commerce opens up a world of possibilities for brands that are looking to adopt a content-led strategy. By adopting this approach, your business can: Reduce tech debt and decrease implementation time for development teams Discover more flexibility to create seamless shopping experiences that increase conversions Design content rich experiences to cater to customer needs Support emerging technologies for the scale of your business Let's explore these four benefits of headless commerce and which of your team members each will specifically impact. Reduce tech debt and decrease implementation time for development teams. Who it helps: developers When it comes to decreasing costs and time to market, headless commerce can be a gamechanger. By decoupling the frontend from the backend, your developers can cra multiple customerfacing independently from the commerce engine, which means two things: 1) Frontend and backend teams can innovate and deploy solutions quickly, without waiting on the other, and 2) You can reduce the expenses involved in what was once a long, arduous development process. As a result, headless allows for faster iteration and quicker time-to-market for new projects, whether you're launching internationally or rolling out omnichannel strategies. And thanks to the flexible tech stack, it's a breeze to implement custom features and functionality. More flexibility to create seamless shopping experiences that increase conversions. Who it helps: director of ecommerce and ecommerce managers Considering companies with a strong omnichannel approach see a customer retention rate of about 89% -- compared to 33% for those with a weak omnichannel approach -- taking a singlechannel approach is no longer su icient. Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549. Luckily, going headless means you can promote your content across the channels you have now -- as well as new ones you add in the future. Since you can modify your frontend without a ecting your backend, you have the freedom to add multiple online and o line experiences, whether it be a mobile app, an online marketplace like Amazon, or a social media platform like Facebook or Instagram. All the while, your commerce engine is consistently running on the backend. Creating these seamless shopping experiences also has the potential to drive more conversions and lower customer acquisition costs. Amid an increase in paid advertising, headless commerce o ers a new way to increase organic tra ic: through a content- or experience-led strategy. By testing various frontend solutions while running the same backend -- and vice versa -- you can determine which channels attract the most tra ic and improve conversion rates faster than traditional ecommerce models. Design content rich experiences to cater to customer needs. Who it helps: ecommerce merchandisers or marketers With a traditional monolithic system, you may find your options limited when it comes to developing new experiences on the frontend. However, with a headless solution, you can integrate new technologies and adapt to new trends as they arise. As a result, your marketing team will have full freedom to innovate and build multiple user experiences across di erent channels -- without hurting your backend processes. Moreover, a headless ecommerce platform houses content centrally and is able to deliver it anywhere via APIs. This method allows for much faster load times than traditional ecommerce platforms and lends itself to exceptional customer experiences. Support emerging technologies as you scale your business. Who it helps: IT executives As new technologies and trends emerge, you'll need to be able to future-proof your brand. Luckily, headless commerce allows you to quickly adjust your frontend without needing to replatform on the backend. In a headless environment, brands can seamlessly test and implement new technologies, giving developers the freedom to innovate without being constrained by traditional CMS limitations. The frontend, or "head," of your ecommerce site can be tailored for optimal content delivery by connecting to a CMS, DXP, or IoT device designed for content- or experience-led commerce. This Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549. setup allows you to swap out the frontend as needed without disrupting backend operations. This way, you can focus less on developing and more on scaling your business. Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549. What are common use cases for headless commerce? Whether you prefer WordPress, Contentful, Contentstack, Bloomreach, Adobe Experience Manager or other CMS/DXPs, PWAs or CRMs -- headless commerce works in just about any use case. All you need is an API connection to decouple the platform's presentation layer and then plug the platform in to where you need it to work. Let's take a look at some of the most common use cases for implementing a headless framework. Custom solutions. A major reason to choose headless may be that you have big ideas that no one system can provide out of the box. Maybe you've found the customization you need by working with opensource platforms in the past but couldn't handle the long development cycles and maintenance. Or maybe you've worked on SaaS but found it was limiting your innovation. With headless, you can keep the customization and lose the cost and upkeep. Headless provides an Open SaaS experience that's the best of both worlds. APIs enable the flexibility you need to think beyond the limits of any one platform or technology and seamlessly connect systems in a more modular fashion. Content Management System (CMS). When the headless architecture 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 Bloomreach, or custom frontend solutions for unparalleled customer experiences that increase conversion. Especially if you're taking an omnichannel approach, pairing headless commerce with a headless content management system is the way to go. Using a single CMS, you can create channelspecific content and various user interfaces with APIs powering your frontend and backend. Digital Experience Platform (DXP). A DXP is a type of so ware that enables companies to quickly digitize and provide an improved customer experience. Combining a DXP with a headless CMS solution can result 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 Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549. separately and also leaves room for additions and edits without a ecting the project flow. 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. They are regular web pages or websites but appear to the user like traditional applications or native mobile apps. By combining the capabilities of websites and mobile so ware, PWAs create an immersive user experience that can lead to higher conversion rates and more time spent on site. BigCommerce is committed to providing merchants the capability to leverage PWAs. We o er integrations with DEITY Falcon and JMango360, as well as a Gatsby-Netlify CMS template to jumpstart developing a serverless PWA storefront. In addition, BigCommerce recently launched Catalyst, our next-generation storefront technology for developers and agency partners. With a fully integrated storefront reference implementation based on Next.js and React, Catalyst provides a full, end-to-end guest shopper experience that is pre-wired to our platform, based on the Next.js frontend framework. Catalyst will be the default starter for new composable builds, utilizing the latest features within Next.js and our GraphQL APIs. Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549. How to get started with headless commerce If these use cases and benefits are resonating with you, you might be wondering how to start implementing a headless framework. Here's a step-by-step approach to help you get going. Determine if headless commerce is right for your business. While the perks of a headless solution are many, this type of framework isn't for everyone. Many businesses still use a traditional monolithic model, and many agencies still recommend a monolithic strategy for enterprise and well-established brands. But if you're looking for greater flexibility, scalability, and agility in your ecommerce platform, a headless solution may be worth considering. Here are few criterion to help you decide whether to make the switch: You're a content-driven brand Your brand is experience-driven and needs the ability to implement personalization, AI or AR capabilities You're looking to create seamless digital experiences across multiple customer touchpoints and devices You have multi-site or international selling needs, serving up multiple frontend experiences powered by the same backend You already use a CMS and want to add commerce You're already selling online and have a separate site for content and need to be able to merge the two Understand the necessary architecture for going headless. To get the most value out of your headless architecture, it's crucial that you first understand how its architecture is unique from a traditional commerce site. On the backend, a headless commerce solution comes equipped with all the essential functionalities to run your store, such as inventory management, pricing, catalog, and checkout. But unlike traditional legacy systems, headless commerce separates these backend elements from your website's frontend, granting both your developers and business users the freedom to continuously innovate and build unique experiences across various customer touchpoints. Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549. This flexibility means your teams can build unique, content-led experiences that convert more e ectively, leading to higher revenue growth. Understanding this architecture is key to leveraging headless commerce to exceed your business goals year-over-year. Identify your frontend storefront options and backend ecommerce provider. To achieve the most optimal headless architecture, you'll need the right frontend for your target audience, as well as a strong backend to power your commerce engine. For the frontend, consider options like custom-built solutions using frameworks like React or Vue.js, or popular CMS/DXP platforms such as WordPress or Drupal. Choosing the ideal frontend will largely depend on the size of your business, your target audience, and the skill set of your developer team. On the backend, you'll need a robust ecommerce provider that o ers core commerce functionality such as inventory management, checkout, and security. Luckily, BigCommerce o ers all of these features -- and more -- out of the box. We allow you to create unparalleled unique customer experiences powered by our back-end commerce platform with the most headless integrations, so you never have to replatform again. Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549. Examples of headless commerce in action It's o en very di icult to tell if a brand is using headless commerce as a strategy just by looking at it. This will only become more 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. Black Diamond. Case Study: Black Diamond When mountain gear brand Black Diamond turned to BigCommerce, the company was seeking to create a clear buyer journey from homepage to checkout, weaving its brand content throughout the customer experience. With the flexibility of a headless framework, Black Diamond achieved an independent, yet cohesive administration of its EU site while leveraging common product data, a single CMS instance and other key services. Black Diamond was able to house its US and EU site under one ecommerce roof and uniquely serve its customers across various markets. Together with a flexible, new CMS, BigCommerce gave Black Diamond the freedom to execute on its vision without a heavy dependance on developers. With the freedom to manage its site directly, Black Diamond was able to leverage its technical team to integrate a PIM setup as well as an ERP system. Burrow. Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549. Case Study: Burrow As a brand specializing in modular, customizable furniture, Burrow needed a headless architecture that would reflect this same flexibility. A er reaching $3 million in sales in 2017, the team sought a modular, flexible ecommerce solution that could keep up with business growth. Turning to BigCommerce, Burrow found the scalable backend system it needed to customize its site quickly and easily. The reliability and lack of maintenance freed up its team to focus more on marketing-focused updates to the site. They were also able to utilize a custom CMS on the frontend, enabling them to create the kind of user experiences they wanted 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. White Stu . Case Study: White Stu Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549. O ering customers a better experience through performance improvements was the initial motivation factor that prompted White Stu , a British apparel and lifestyle brand, to replatform to BigCommerce. It knew speed and functionality were constrained by the technology it was using, so the solution was to separate the front- and back-ends by going headless. "I was really adamant about the role of speed on the site because of the need with fashion retail to bring content to life through the increased use of video and rich imagery that a customer wants to experience our brand," said Steve Borg, Technology and Transformation Director at White Stu . "So that really drove some decisions around a headless implementation. We felt that that was the best way to retain a lightweight front-end and give us the maximum chance of consistently being able to provide that fast experience for customers." Combat Corner. Case Study: Combat Corner Before implementing a headless commerce architecture, Combat Corner faced significant challenges with its previous ecommerce platform, including slow page-load times that hindered user experience and di iculties in managing and updating the site e ectively. A er migrating to BigCommerce, Combat Corner implemented a headless solution with a React frontend on WordPress Engine's Atlas platform. This integration not only improved site performance and user navigation but also provided the flexibility needed to manage and update the online store e iciently, ensuring a seamless customer experience across devices. To see more examples of headless commerce in action, check out our BigCommerce Case Studies page. Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549. The Final Word The numbers don't lie -- customers want better online experiences. PwC found that 73% of shoppers say customer experience is the number one thing they consider when deciding whether to purchase from a company. Luckily, headless commerce solutions are paving the way for businesses to build content- and experience-led online stores -- all while achieving more flexibility, faster time to market, and greater scalability. Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549. FAQs About Headless Ecommerce Is a headless CMS the same as headless commerce? Headless describes the approach of separating the frontend presentation layer from the backend ecommerce solution that manages all commerce functionality. A headless CMS (content management system) 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. Moving from a commerce-led to a content-led approach, a headless CMS lets you build separate frontends (aka heads) for each channel that displays content, so you can use a single CMS to create channel- and user-specific content. However, you'll have to build your own frontend layers, as the CMS only provides the backend (aka body) layer. How is BigCommerce headless di erent from other headless solutions? If opting for headless commerce, platforms like BigCommerce, Shopify, commercetools, Salesforce, and Adobe Commerce are viable options. However, BigCommerce stands out with extensive headless integrations and customizable options, including connectors for leading CMSs, digital experience platforms, and custom front-end frameworks. This foundation enables enterprise agility and quick adaptation to evolving consumer demands. Comparatively, Shopify's Hydrogen framework supports only Shopify web storefronts, lacking flexibility for custom mobile apps or smart devices. Commercetools o ers a headless platform but requires custom engineering without pre-built integrations, unlike BigCommerce. Salesforce's headless solutions are pre-built and less flexible for adding new functionalities, and Adobe Commerce supports headless deployments but lacks pre-built integrations, necessitating extensive research and custom integration e orts to deviate from its legacy system. Does every ecommerce store need a headless solution? No, not every ecommerce store needs a headless solution. Many di erent 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 personalization, AI or AR capabilities. It's looking to create seamless digital experiences across multiple customer touchpoints and devices. It has multi-site or international selling needs, serving up multiple frontend 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. Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549. Do I need a developer for headless commerce? Yes, headless commerce needs a developer since the frontend and the backend of your ecommerce solution are decoupled. This frontend developer will create the presentation layer of your site -- which includes items such as text colors and styles, images, graphs and tables, buttons, etc. However, with headless commerce, frontend developers don't need to worry about modifying the backend ecommerce functionality -- which includes pricing, infrastructure, security, checkout, etc -- since the frontend and backend are disconnected. Is headless commerce the future of ecommerce? Compared to traditional ecommerce, headless commerce o ers a number of advantages: scalability, access to new technologies, faster web development, complete ownership over site architecture, marketing e ectiveness and more. And in our ever-changing economy, being able to respond quickly to trends and shi ing consumer behaviors is more important than ever. By decoupling the frontend presentation layer from the backend commerce engine, headless businesses will be able to more quickly react to market changes and minimize their time to market, thus giving them a competitive advantage over traditional commerce platforms. Growing your high-volume or established business? Start your 15-day free trial, schedule a demo or give us a call at 1-866-581-4549.