---
title: "Page templates"
description: "The default, archive and posts templates, hero types and custom page templates."
url: https://docs.systhema.app/payload/content/page-templates
version: unreleased (main)
docs_index: https://docs.systhema.app/llms.txt
---

A page template defines the content fields shown in Admin and the component that renders them. The `pageTemplate` field stores its name. Systhema hides the selector when `default` is the only choice.

![The default page template's hero and content fields](./images/page-template.light.webp)

## The default template

The default template stores its data under `page.default`:

| Field          | Behavior                                                                                                         |
| -------------- | ---------------------------------------------------------------------------------------------------------------- |
| `articleTheme` | Article color-system selection, controlled by `articleColorSetting`. Without that option the value is `inherit`. |
| `hero`         | Combined hero fields, selected by `heroType`.                                                                    |
| `content`      | Root-tier Lexical editor with Component insertion enabled.                                                       |

`DefaultPage` renders `<main id="main-content">`, then an [Article](https://docs.systhema.app/components/article.md) containing the hero and converted content. The page's shared SEO tab remains separate from the template fields.

## Hero types

**Simple** places a title, optional label and description above optional media. **With Background** places that copy over one image-or-video upload, with an overlay toggle. **Feature** places media beside the copy. **None** omits the template hero.

Simple and Feature support image, uploaded video, YouTube and configured Google Maps media. Description uses a `slot` editor. Standalone [Hero blocks](https://docs.systhema.app/payload/blocks/hero.md) use the same field names and renderer; set the template hero to None if a standalone hero supplies the page's `<h1>`.

## The archive template

Enabling the [Posts module](https://docs.systhema.app/payload/posts.md) adds the `archive` page template. Its Hero, Prepend, Posts and Append tabs store data at the page root rather than inside `page.archive`. It resolves listing data on the server and passes it to both the server template and client preview. See [Archive pages](https://docs.systhema.app/payload/posts/archives.md).

Post templates belong to the Posts collection and `customPostTemplates`; they are not additional choices in a Page's selector.

## Custom page templates

Add a `SysthemaPayloadPageTemplate` through `customPageTemplates`. Templates merge by `name`; a custom entry with an existing name replaces that entry. `pages.default` can supply a replacement default template.

```tsx title="src/payload/templates/Landing.tsx"
import type { SysthemaPayloadPageTemplate } from '@systhemaui/payload'

function Landing({ pageData }: { pageData: { landing?: { introduction?: string } } }) {
  return <main id="main-content"><p>{pageData.landing?.introduction}</p></main>
}

export const landingTemplate: SysthemaPayloadPageTemplate = {
  name: 'landing',
  label: 'Landing',
  component: Landing,
  fields: [{ name: 'introduction', type: 'textarea' }],
}
```

Pass `customPageTemplates: [landingTemplate]` in the second argument to `withSysthema`. The ordinary `fields` array becomes a group named after the template, so this example reads `pageData.landing.introduction`.

### Tabs and sidebar fields

Use `editorTabs` for separate top-level tabs. These fields keep their names at the document root; there is no template-name group. `sidebarFields` also store root-level data and show only when that template is selected. Sidebar entries must be named fields, rather than rows, tabs or collapsibles. Prefix root-level names to avoid collisions with built-in `hero`, `listing`, `prepend` and `append` fields.

### Data and client preview

`resolveData` receives `payload`, `pageData`, `draft` and optional `locale` on the server. Return serializable auxiliary data for the renderer. A `clientView` receives live form state as `data` and that result as `aux`. A template without `clientView` falls back to server preview. See [Page and post templates](https://docs.systhema.app/payload/frontend/live-preview/templates.md) for the full prop contract.

Adding or changing persisted fields requires regenerated Payload types and your project's schema migration process.

## Related

- [Pages](https://docs.systhema.app/payload/content/pages.md)
- [Hero components](https://docs.systhema.app/components/hero.md)
- [Live preview templates](https://docs.systhema.app/payload/frontend/live-preview/templates.md)