Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content



On May 13th, 2024, Storyblok started gradually rolling out a new design for its Visual Editor. Therefore, the Visual Editor product screenshots depicted in this resource may not match what you encounter in the Storyblok App. For more information and a detailed reference, please consult this FAQ on the new Visual Editor design.

If you don’t have a Commercetool store already, you can create a trial store for 60 days. Since Commercetools has different API endpoints, you’ll need the following endpoints, which we get from Settings -> Developer Settings {1} -> Create new API client {2}.

Commercetool Endpoint
Commercetool Endpoint

We will only need a few basic access scopes: View Categories & Products:

Commercetool Api Settings
Commercetool Tokens

To set up our project, we will need the project_key {1}, the client_id {2}, the secret {3} and the API URL {1}. Since the API reads products based on locales, you will also need to provide one of your locales to the Storyblok plugin, which you can find under Settings -> Project Settings {1} next to the language you want to use {2}.

Commercetools Locale

Once you have all your credentials, you can jump to configuring your plugin within your Storyblok space. The endpoint will be a combination of your project_key and your API URL. You will need to follow four options:

endpoint (required)
clientId (required)string - generated from the step above
clientSecret (required)string - generated from the step above
locale (required)string - e.g. (en-EN, de-DE)

Your Storyblok plugin should look like the image below: