Skip to main content
Version: 3.x


The Contentful extension provides a connector to use Front-Commerce with a Contentful. You can easily retrieve content from your Contentful instance and display it in your Front-Commerce application.


Before you can use the Contentful extension, you need to have the following:

To set up a Contentful instance, please refer to the Contentful documentation.

To set up a Front-Commerce environment, please refer to the Front-Commerce documentation.


To install the Contentful extension, run the following command:

$ pnpm install @front-commerce/contentful@latest


To use the Contentful extension, you need to configure your environment and your Front-Commerce application.

Environment variables

In the .env file, you need to define the following environment variables:

  • FRONT_COMMERCE_CONTENTFUL_SPACE_ID: The ID of your Contentful space
  • FRONT_COMMERCE_CONTENTFUL_ACCESS_TOKEN: The access token for your Contentful space
  • FRONT_COMMERCE_CONTENTFUL_PREVIEW_ACCESS_TOKEN: The preview access token for your Contentful space

Optionally, you can also configure a different environment using FRONT_COMMERCE_CONTENTFUL_ENVIRONMENT=xxx.

You can also explicitly override the locale used when retrieving Contentful content by using the FRONT_COMMERCE_CONTENTFUL_DANGEROUSLY_FORCED_LOCALE environment variable or with the contentful.locale configuration from a configuration provider. Please note however that this is not recommended by Front-Commerce.

Front-Commerce application

To use the Contentful extension in your Front-Commerce application, you need to register the extension in your front-commerce.config.ts file:

import { defineConfig } from "@front-commerce/core/config";
import themeChocolatine from "@front-commerce/theme-chocolatine";
import magento2 from "@front-commerce/magento2";
import contentful from "@front-commerce/contentful";
import storesConfig from "./app/config/stores";
import cacheConfig from "./app/config/caching";

export default defineConfig({
extensions: [
magento2({ storesConfig }),
stores: storesConfig,
cache: cacheConfig,
configuration: {
providers: [],