Documentation

Custom Views

Start developing Custom Views for the Merchant Center.

Prerequisites

Before you start development, make sure to have the following:

Yarn PnP is not supported.

Install a starter template

The easiest way to get started is to use one of the starter templates. To create a new Custom View from a starter template using the create-mc-app package, run the following command:

Create new Custom View from the starter templateTerminal
npx @commercetools-frontend/create-mc-app@latest \
  my-new-custom-view-project \
  --application-type custom-view \
  --template starter

To start with a TypeScript project, use the --template=starter-typescript flag. For more information about developing customizations with TypeScript, see the Adding TypeScript page.

After the installation is complete, issue the following command to start the development server:

cd my-new-custom-view-project


yarn start

This command opens a new browser tab pointing to http://localhost:3001. You'll be redirected to the Merchant Center login page, where you need to enter your Merchant Center account credentials. After authentication, you'll be redirected to the local development server and have access to the Project.

In contrast to Custom Applications, Custom Views are implemented inside the built-in applications of the Merchant Center. To help with development, the local server will first render a dummy application. You can use this dummy application to access your Custom View, just like you would in the Merchant Center.

The following image shows the local development landing page for the starter template:

Local development landing page for the starter template

And here is an example with the Custom View opened:

Local development with the Custom View opened

Configure the Custom View

Before you start developing your Custom View, you should familiarize yourself with the design guidelines to understand the best practices for panel sizes, content layout types, and general component usage.

You'll also want to familiarize yourself with the Custom View Config (custom-view-config.mjs) which lets you configure various Custom View properties, including the panel size.

By default, the starter template is configured to use the HTTP APIs in the GCP EU Region. If you plan to run your Custom View in another environment, you will need to update the cloudIdentifier accordingly. For more information, see our list of cloud identifiers.

User access for local development

To start developing your Custom View locally, choose a Project belonging to an Organization in which you are a member of the Administrators Team.

You have the option of assigning granular permissions to teams to enable local development. For more information, see Granular permissions for local development.