Why Headless Ecommerce?
Headless ecommerce websites have emerged as a trend over the last couple years. You might be wondering, “What does headless even mean?” At the most basic level, it’s something without a frontend delivery layer. RESTful APIs provide the data, giving a frontend engineer the power to create that frontend with whatever tools and frameworks they think will work best for the job.
Building our own frontend layer might sound like a lot of work. Why would we want to do this? There are a few reasons:
- Flexibility
- Customization and personalization
- Building for the future
- Speed to market
Flexibility
By not using a built-in frontend platform like Stencil in the case of BigCommerce, a frontend engineer is able to work with UI and UX designers to build a user experience from scratch that best fits the business needs and value proposition. Since all the site data is served through a RESTful API the engineer doesn’t need to think about how changes being made might affect the database or overall stability of the ecommerce platform, making iterations less risky. It also gives the engineer the control to only include components that are needed for the experience rather than having a large set of templates so the website is able to be very light and performant.
Customization and Personalization
When using a frontend platform provided by a third-party like Shopify or BigCommerce, there are often limitations since the third-party doesn’t know your business and has done their best to create a one-size-fits-all tool. This can handcuff you to designs and user experiences you’re not quite happy with and prevent you from innovating in the ways you really want to. No one wants to hear, “Sorry we can’t do that — it’s a system limitation.” It also means that your site will end up looking a lot like all other sites out on the web using the same frontend platform you are. Building a frontend with a JavaScript framework like React or Vue provides plenty of room to create a unique experience to catch the attention of consumers.
Building for the Future
With a traditional ecommerce platform, if you want your website or application to be available on a newer device like a smartwatch or a smart home assistant, you would need to wait for the ecommerce platform developers to release support for that device as a new feature. In the headless ecommerce model, as long as the device is able to make calls to a RESTful API, you can be innovative and create a consistent ecommerce experience across all the new devices that consumers are adding to their lives.
Speed to Market
As mentioned above, headless architecture allows a frontend engineer to iterate with little risk to the backend and database. These frontend iterations can also happen much more quickly for the same reason. Integrations that are a good fit for the product can typically be implemented with less time and cost because the architecture is so open.
Another benefit of headless in regard to speed is that it allows the frontend engineer to use tools and languages they are already familiar with like React or Vue. There are far more frontend engineers who are proficient in at least one JavaScript framework than those who are proficient in Stencil or Liquid. Going the out-of-the-box route and customizing the provided templates requires each engineer to get up to speed on the needed technology and even then it will take more time for each engineer to be truly proficient and know all the ins and outs and gotchas of that technology.
Examples of Headless Ecommerce Sites
Young Tribe creates a very unique experience for their users using a custom React frontend with BigCommerce. They’re able to implement a unique landing page that would be difficult to do using a theme template and they’re also able to implement a music player for tracks with an add to cart button, download button, and share button for each track. The end result feels very fresh and provides a seamless experience for their users with all actions they would want to take on a track available in one place.
Oliver Bonas uses a custom Angular frontend with Magento to create a fashion and homeware ecommerce site. It gives them the power to customize their product category catalog pages on a per category basis and to include tons of rich imagery showing off the clothing and jewelry they sell to really appeal to the consumer.
Tradeoffs
With all software development, there are tradeoffs. Some things may be very easy and quick to accomplish using the out-of-the-box frontend platforms that BigCommerce and Shopify provide. Those same things might take a little longer to accomplish using headless architecture. Other things may be extremely difficult if not impossible to accomplish using those out-of-the-box frontend platforms, but with headless architecture it becomes a much easier lift.
With a headless ecommerce site, there will be times when you tradeoff more time and development effort but what you get in return is a higher quality web application and complete control over that application. Each component of the application can be designed with the best user experience in mind and every component of the application is there for a reason, not just because it came with the out-of-the-box solution.
Wrapping Up
The key here is that headless ecommerce decouples the frontend experience from the backend allowing flexible, fast-paced development to occur. Headless ecommerce is the best way to meet consumers where they are and provide them with the best user experience alongside a fresh and unique aesthetic.
