# For Template developers

Build and customize storefront templates on the Web Builder boilerplate with UI-only changes.


Build and customize the front-end templates that render erxes websites: the Next.js code that turns CMS pages, sections, and menus into a deployed site. This track is for developers implementing the presentation layer of a Web Builder site: the layout, reusable sections, and page templates in a template repository such as `erxes-web-templates/ecommerce-boilerplate`. Template repositories are separate from the `erxes/erxes` product repo.

What the product defines:

- **The data format.** `Page.pageItems` carries section data (`type`, `content`, `order`, `objectType`/`objectId`, `config`), and `cp*` operations such as `cpCmsPageDetail` and `cpMenus` deliver it to a site ([page schema](https://github.com/erxes/erxes/blob/f91e8c6f4714c910a32c6b6e14fe085f6435c89e/backend/plugins/content_api/src/modules/cms/graphql/schemas/page.ts)).
- **The deploy pipeline.** `cpDeployWeb` clones your template repo, writes `data/configs.json`, `data/pages/<slug>.json`, `app/favicon.ico`, and a `next.config.ts` with erxes environment variables, then deploys to Vercel with `yarn install` and `next build` ([utils/utils.ts](https://github.com/erxes/erxes/blob/f91e8c6f4714c910a32c6b6e14fe085f6435c89e/backend/plugins/content_api/src/modules/webbuilder/utils/utils.ts)).
- **Seeded pages.** `createWeb` seeds slugs like `home`, `about`, `contact`, `products`, or `tours` depending on `templateType` (`ecommerce`, `restaurant`, `hotel`, `tour`) ([web.ts](https://github.com/erxes/erxes/blob/f91e8c6f4714c910a32c6b6e14fe085f6435c89e/backend/plugins/content_api/src/modules/webbuilder/graphql/resolvers/mutations/web.ts)).

> [!WARNING]
> **UI-only scope**
>
> Template work is presentation-only. Adjust markup, styles, responsive behavior, and component states, but do not change the data layer: GraphQL operations, `pageItems`/`config` shapes, portal tokens, or route identifiers. Those belong to the CMS integration.

## Prerequisites

- Access to the template repository you are changing.
- Node.js and the package manager the template declares; deployed templates build with `yarn install`, while the erxes monorepo itself uses pnpm.
- A running erxes instance with the Content plugin (`ENABLED_PLUGINS=content`) and a Client Portal if you need live data; fixture mode covers pure presentation work.
- For data fetching and credentials, see the [CMS + Next.js track](https://erxes.io/docs/content-plug-cms-next-developers-introduction).

## Guides

- [Introduction](https://erxes.io/docs/content-plug-template-developers-introduction): Start here to learn how to work with the erxes Web Builder boilerplate and the UI-only constraints for template developers.
- [Installation](https://erxes.io/docs/content-plug-template-developers-installation): Set up your local environment for building composable, data-aware templates in the Web Builder.
- [Development Guide](https://erxes.io/docs/content-plug-template-developers-development-guide): Rules and workflow for UI-only changes, repo setup, and what you are allowed to edit.
- [Template Structure](https://erxes.io/docs/content-plug-template-developers-template-structure): How the ecommerce boilerplate is organized so you can update UI without touching core plumbing
- [Template Layout](https://erxes.io/docs/content-plug-template-developers-template-layout): Understand the global layout (header, footer, theme) for the ecommerce boilerplate so you can adjust UI without touching core logic.
- [Template Sections](https://erxes.io/docs/content-plug-template-developers-template-sections): Change how existing template sections look without breaking their data bindings
- [Template Pages](https://erxes.io/docs/content-plug-template-developers-template-pages): The pages in the ecommerce boilerplate and the UI-only rule for changing them