Documentation

This is the early access documentation preview for Custom Views. This documentation might not be in sync with our official documentation.

Overview

commercetools Frontend helps developers and business users collaborate on creating and maintaining the frontend for their e-commerce website.

What commercetools Frontend does

commercetools Frontend provides a development framework and the tools to build, deploy, and maintain an e-commerce website. With commercetools Frontend you can:

  1. Orchestrate data from different headless services with the API hub and extensions.
  2. Develop, deploy, and maintain reusable UI components.
  3. Design, manage, and optimize your website from the Studio.
  4. Serve your website as a Progressive Web App (PWA), optimized for performance and mobile-first with the delivery layer.

A diagram with an overview of commercetools Frontend architecture

At the heart of commercetools Frontend are Frontend components, which are configurable and reusable elements used to build the structure of website pages. Frontend components are React components with a schema. They are created by developers and made available in the Studio to business users, who use them to design the layout of the website pages.

commercetools Frontend comes with a Frontend component library for the most common e-commerce use cases, like product listings, details pages, cart, and checkout.

With the API hub, you can connect to any backend API to fetch the data to be displayed on your website pages through Frontend components. With the API hub, you get a unified way of connecting and working with your technology stack as it simplifies the complex wiring that usually comes with composable architectures.

You can extend the backend functionality by creating extensions written as JavaScript functions. Extensions let you fetch data, perform mutations, or any other business logic for your e-commerce website. A ready-to-use extension to Composable Commerce is included.

From the Studio, you can build, edit, and manage the pages and structure of your website.

For more information, see Main development concepts and Architecture and stack.

How you work with commercetools Frontend

As a developer, you'll use the CLI in combination with the Studio to develop Frontend components and extensions, and to manage the configuration and performance of your commercetools Frontend project.

As a business user, you'll work within the Studio to design, manage, and optimize your website.

Support

If you experience any issues when using commercetools Frontend, you can contact Support via the Support Portal.

To check the status of commercetools Frontend, see the system status page.