Overview

Hi, there 👋

Welcome to the commercetools Frontend documentation, but before we go through how to work with us, let's introduce ourselves a little.

commercetools Frontend removes the complexity when building commerce sites in a headless world.

commercetools Frontend enables you to:

  1. Orchestrate data from different headless services with our API hub
  2. Build, deploy, and iterate on websites faster by using our component layer
  3. Create, manage, and optimize websites with the studio
  4. Serve your websites as PWAs, optimized for performance and mobile first with our delivery layer

fdec66b ThisIsFrontastic

commercetools Frontend provides a development framework and all the necessary tools to build, deploy, and iterate on a commerce site. At the heart of what we do are Frontend components, which are React components with a schema. They're built by developers, added to pages by business users, the data is brought in from the API hub, and they're delivered optimized for performance to your customers.

With the API hub, you can connect to any backend API and use their content and data when building websites. With the API hub, you get a unified way of connecting and working with your technology stack as it takes care of all the complex wiring that usually comes with composable architectures.

All extensions to backend APIs are written as JavaScript cloud functions. A ready-to-use extension to commercetools is included.

commercetools Frontend comes with a component library for the most common commerce use cases, like product listings, details pages, cart, and checkout. You can copy these into your project to get started quickly.

Components are made available in the studio, where anyone in your team can manage the whole website without needing a developer. In the studio, you can edit and optimize your sites, including pages, components, navigation, and layouts.

commercetools Frontend provides the delivery layer that serves the website as a Progressive Web App (PWA). It uses Next.js, which is based on React and is known for its performance and features for developing web applications. We also provide auto-scaling, fail-safe hosting, and Server Side Rendering (SSR).

For more information, see our article about the frontend architecture and stack.

How do you work with commercetools Frontend?

As a developer, you'll interact with commercetools Frontend in 2 different ways. To create extensions, you'll work with a sandbox that's provisioned automatically in the studio. To build, modify, and deploy Frontend components, you'll use the CLI in combination with the studio.

As a business user, you'll work within the studio to create, manage, and optimize your commerce site.

Support

If you can't find what you're looking for in the documentation or if you have any general feedback, please send us a message using the Submit a ticket button at the top of your page.