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

For now, the CMS extension is only compatible with Gezy (@front-commerce/gezy). 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: [],
  },
});

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 the Gezy 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.