Reviewing Commercetools: Core Features and Developer Experience
Commercetools is an API-first, cloud-based commerce engine specifically geared for mid-market and large enterprise companies. Commercetools is a pioneer in the headless commerce space, launching their Composable Commerce product in 2010.
Headless commerce refers to the decoupling of the frontend user interface from the backend logic. A critical element that powers headless commerce is an Application Programming Interface (API) that allows your developers to create custom frontend applications powered by your commerce engine.
Headless commerce is one aspect of what has come to be known as MACH architecture, a novel approach to structuring a tech stack that allows brands to adopt best-of-breed cloud-native technologies.
Commercetools has grown in popularity as ecommerce brands large and small have come to recognize the advantages of an API-first approach to building their tech stack. In this article, we review the following:
What is MACH architecture?
MACH architecture is an acronym that stands for micro-services (M), API-first (A), cloud native (C), and headless (H). It refers to a new approach to architecting a brand’s technology stack.
MACH architecture stands in contrast to the monolithic approach to building a tech stack, which can best be exemplified by traditional ecommerce platforms such as Shopify and BigCommerce.
Platforms such as Shopify offer an all-in-one solution for ecommerce brands, which includes an online storefront, marketing automation, data analytics, inventory management, and much more. These solutions are tightly coupled in that they are highly dependent and integrated with each other.
With MACH architecture, however, your brand can decouple these features and select best-of-breed technologies to support your tech stack. Your brand can select cloud-hosted third-party services and integrate them into your technology stack via APIs.
Instead of relying on Shopify’s native Content Management System (CMS), for example, your brand can select a best-of-breed solution such as Contentful or Sanity to power your content experiences. You can also adopt an Inventory Management System that meets your business and technology needs rather than rely on the one that is native to a monolithic platform.
Your tech stack can also create a custom frontend instead of adopting the native online storefront. This is often referred to as “going headless.” Your brand can build a custom “head” that is highly performant and provides your customers with an exceptional user experience.
Commercetools Core Features
Commercetools’ product offerings have evolved since they launched their first product. In this section, we review their two core products: Composable Commerce and Commercetools Frontend. Together, both products give ecommerce brands the ability to power both a commerce engine and a frontend experience.
Composable Commerce
Composable Commerce is a commerce engine that powers ecommerce-related frontend experiences as well as a brand’s internal operations, with capabilities such as order management, data analytics, and much more.
At its core, Composibile Commerce consists of a set of APIs that allow your development team to read and write against your data, and an admin panel, referred to as the Merchant Center, to update your product catalog and manage orders.
Headless Platform API
The core feature of any headless commerce solution is its APIs. As an API-first platform, Commercetools makes available all your ecommerce-related data accessible via APIs.
This is in contrast to traditional ecommerce platforms, such as Shopify and BigCommerce. While BigCommerce, for example, exposes APIs for brands that want to go headless, the ecommerce platform claims that only 92% of your ecommerce data is available via APIs.
Commercetools’ APIs are available via both REST and GraphQL protocols. While REST APIs are historically the most popular API protocol, GraphQL queries are optimized for performance. The availability of a GraphQL API is a bonus for brands that are concerned about optimizing their online storefronts for page loading speed.
The headless platform API makes available to your brand the ability to support several ecommerce functions, such as a product catalog, discounts and promotions, order management, customer data, cart and checkout.
A great advantage of the headless platform API is that brands can add custom fields to all of the major API objects. The ability to add custom fields provides for a flexibility not often available to cloud-native SaaS solutions.
Merchant Center
The Merchant Center serves as the admin panel, where your team can update products, create categories, manage orders, and more.
The main dashboard presents various types of data analytics that can be customized depending on your business needs. Users can view various types of information such as sales performance, total sales, average order value, and total orders.
Your products, customers, and orders can easily be managed with advanced search and filtering capabilities.
A unique feature of the Merchant Center is the ability to extend its functionality. If your business needs or use cases require additional functionality from the Merchant Center, your developers can build a custom application using React and GraphQL, with components from a UI library.
Commercetools Frontend (formerly Frontastic)
Commercetools Frontend is a Frontend as a Service (FEaaS) solution. A FEaaS platform is a cloud-hosted set of modules that allow your developers to build custom online storefront.
The main advantage of adopting a FEaaS, instead of relying on a popular JavaScript framework such as Next.js and Gatsby, is that it accelerates the productivity of your developers, freeing them up to work on new features and functionality.
Commercetools has historically been known for headless commerce, but in 2021, they purchased the FEaaS provider, Frontastic, and incorporated their platform into their product offering.
Commercetools Frontend is built with React and Next.js and supports server-side rendering, offering deployment and hosting options with Netlify.
There are 4 core elements to Commercetools Frontend: (1) Frontend Studio, (2) API hub, (3) developer tooling, and (4) Frontend delivery. In this section, we focus on the Studio and API hub as these two elements best highlight the Commercetools offering.
Frontend Studio
A disadvantage of adopting a headless commerce solution is that your content and marketing teams often become more dependent on developers to update content and launch marketing campaigns. Frontend Studio solves for this by making available to your internal teams a page builder experience.
Frontend provides out-of-the-box UI components to your developers to customize and register with the Studio. Your content and marketing teams now have the ability to edit content, create new pages, and update existing pages.
Giving your business users the autonomy to create and update customer experiences frees up your developers to focus on new features and functionality that grow the business.
API Hub
The API Hub centralizes all of Frontend’s API requests and responses in one place. When your brand adopts a headless architecture, it needs to receive and make requests to a multitude of microservices, from a commerce engine and CMS to an Inventory Management Service and Payment Provider.
Making API requests to all these services from the frontend application can be difficult for your frontend developers to manage, especially as API endpoints change. It can also impact performance as the frontend waits for responses from multiple API endpoints.
With an API Hub, on the other hand, your frontend only has to make queries to one API endpoint. That request is made to the API Hub, which receives the request and relays them to the appropriate services. The hub receives the response, formats the data, and sends it back to the user’s browser.
This leads to a more performant user experience as this minimizes the number of API requests made by the frontend and relieves it of any data formatting obligations. It also eliminates the burden of having your frontend developers manage the API requests to your microservices, allowing them to write cleaner, easier to manage frontend code.
Evaluating Commercetools
The criteria one should use to evaluate a headless commerce solution is different from a monolith ecommerce platform. Given that the software primarily offers API capabilities and will be heavily used by developers, any evaluation of a headless commerce platform should take this into account.
In this section, we review Commercetools’ product offering against the following criteria:
Pricing
Customer Support
API Capabilities
Developer Experience
Integrations
Pricing
Commercetools does not discuss pricing on their website. You’ll need to contact their sales team in order to learn more about pricing.
Commercetools has said that pricing is based on a brand’s Average Order Value (AVO). AVO is calculated by dividing total revenue by number of orders. What this means is that if you’re selling apparel on your online storefront, you’ll be paying less than if you’re selling expensive machinery.
Customer Support
Commercetools offers two tiers of customer service: the Standard and Premium plans. Commercetools’ level of support for each plan varies based on four Severity levels: (1) Critical Incident, (2) Incident, (3) Problem, and (4) Questions. In this section, we’ll focus primarily on Critical Incidents and Incidents. We’ll review the Problem and Questions severity levels in a later section.
Response times vary depending on the severity level for each customer support plan. If your brand is on the Standard plan, 24/7 response times are available for any Critical Incidents or Incidents. Commercetools’ support will respond back to you within 60 minutes for a Critical Incident and 180 minutes for an Incident.
On the Premium plan, response times for all severity levels are shorter. Commercetools provides a 20 minute response time for Critical Incidents and 90 minute response time for Incidents.
With the Standard plan, Commercetools primarily responds to your concerns via a support portal and status page. With the Premium plan, however, you’ll get a phone callback as well.
Customers on the Premium plan also receive extra support from a Customer Success Engineer who can review your tech stack, participate in technical working sessions, review any implementation plans, and more.
API Capabilities
As discussed in an earlier section, Commercetools makes available to your developer team APIs using both REST and GraphQL protocols. Since several major headless commerce providers don’t offer a GraphQL API, this is certainly a benefit of adopting Commercetools. GraphQL is optimized for performance and should be used if it's available and meets your business needs.
Most ecommerce platforms also set rate limits for their APIs. Rate limits are the number of API calls made to an app within a time limit. An error is raised if the number of API calls exceed this limit.
Commercetools does not display a rate limit on their website. Instead, they set limits on certain parameters or objects associated with their API. For example, a maximum of 500 elements can be fetched per query. In addition, a JSON document persisted through Commercetools’ API cannot exceed 16 megabytes.
Developer Experience
Your developers will spend a great deal of time working with Commercetools’ APIs. As a result, it’s critical to evaluate the developer experience to ensure your teams remain productive and can quickly launch new features and functionality to market.
Commercetools comes with thorough API documentation for both REST and GraphQL protocols. The documentation provides both code examples as well as a complete limit of query parameters.
Commercetools also makes available a library of API requests for use with Postman, a desktop application for API development. Your developers can use this library to thoroughly explore the REST API.
In order to speed up development, Commercetools also provides your developers a Software Developer Kit (SDK) for use with JavaScript, PHP, Java, and C#. In addition to SDKs, your developers also have access to a storefront accelerator written in Vue.js, PHP, Java, and iOS.
If your developers have any questions about the documentation or usage of components, they can rely on Commercetools’ Standard or Premium customer support plans. For certain technical questions that fall under the severity level of Problems or Questions, your developers can contact customer support 24 hours a day from Monday through Friday.
Integrations
Integration extensions are modules that allow you to connect Commercetools with a third-party service so they can share information. When adopting a headless commerce platform, you’ll rely heavily on either a native or custom integration to a variety of microservices.
Commercetools’ Integration Marketplace has several dozen integrations with various types of Content Management Systems, Payment Provider, Search tools, and much more. If the Integration Marketplace doesn’t not have a native integration for a tool you need to support, Commercetools allows your developers to build a custom integration.
Commercetools Case Studies
Commercetools customers are primarily mid-size to large companies and vary from B2C to B2B and B2B2C. In this section, we cover two brands that adopted Commercetools to power their ecommerce experience.
Tamron Europe
Tamron is a global camera lens manufacturer headquartered in Japan. It operates by selling lenses through distributors, local dealers, and online marketplaces like Amazon. Its European division, Tamron Europe, manages marketing, sales, and other services from its European headquarters in Germany.
Tamron Europe’s management decided to build an online storefront when they learned that many of their customers visited their website looking to purchase lenses. They decided to adopt a headless architecture given their plans to sell internationally and support multiple languages.
Tamron adopted Commercetools to power their commerce engine. They also selected Vue Storefront for their frontend, Adyen for payments, and Storyblok for their Content Management System.
Tamron’s development team implemented the Commercetools backend in only 2 months. The brand has seen a 54% increase in Google performance value and an 89% performance and accessibility score.
Normet
Normet is a Finnish company that sells equipment and parts to underground mining companies. The brand has historically relied on face-to-face and phone conversations to make sales but realized that customers desired a digital, automated experience to purchase their products.
Normet’s catalog includes 65,000 spare parts and a digital experience would support the ability to cross-sell and promote products. They selected Commercetools to power their backend commerce engine and were able to deploy their storefront within 4.5 months.
Customers are now ordering online and Normet is in the process of collecting user feedback in order to iterate and create a better customer experience.
Wrap Up
As an API-first, cloud-native platform, Commercetools is a pioneer in the headless commerce space. The acquisition of Frontastic in 2021 also offers brands a well-architected frontend that is capable of integration with any microservice in your tech stack.
You’ll be in good company by adopting Commercetools given the many mid-size to large ecommerce brands that use the platform to power their commerce backend.
