Skip to main content
Version: next

CMS

The CMS extension adds an editor-based content management system to Front-Commerce: build editable pages from reusable sections, illustrate them with a media library, and edit everything directly on the storefront.

Since version 3.21

With @front-commerce/cms, content managers build and edit pages directly on the storefront. Pages are composed of sections (hero banners, title + text blocks, …), edited through an in-context Page Editor, and illustrated with assets from a built-in media library.

Compatibility

The CMS extension is compatible with Gezy (@front-commerce/gezy), Magento 1 (@front-commerce/magento1), and Magento 2 (@front-commerce/magento2). The flavor passed to cms(flavor) selects which connector backend stores the content events. To discuss compatibility with other connectors, please

contact us.

Installation​

Install the CMS extension:

$ pnpm install @front-commerce/cms@latest

Enable it​

Register the extension in your front-commerce.config.ts file. cms(flavour) must be added after your connector's extension — on startup it reads the connector's services to wire up content storage and the media library.

Example with the Gezy connector :

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

export default defineConfig({
  extensions: [
    gezy({ storesConfig }),
    themeChocolatine(),
    cms("gezy"),
  ],
  stores: storesConfig,
  cache: cacheConfig,
  configuration: {
    providers: [],
  },
});

With the Magento 1 connector, pass "magento1" instead:

front-commerce.config.ts
cms("magento1"),

With the Magento 2 connector, pass "magento2":

front-commerce.config.ts
cms("magento2"),

The flavor must match the connector registered in the same config.

The extension wires up its routes, GraphQL, theme, and media library on its own. The connector backend, however, has its own prerequisites — see Set up a backend before you start editing content.

What you can do​

  • Edit pages in context with the Page Editor — see Using the CMS.
  • Manage media — browse, upload, and organise images from the media library — see Manage media.
  • Add your own section types to the editor — see Create custom sections.