diff --git a/docs/addons/writing-presets.md b/docs/addons/writing-presets.md
index bde2651b6aae..797c9ad192a6 100644
--- a/docs/addons/writing-presets.md
+++ b/docs/addons/writing-presets.md
@@ -195,6 +195,8 @@ For example, the following snippet adds a style tag to the preview head programa
 
 Similarly, the `managerHead` can be used to modify the surrounding "manager" UI, analogous to `manager-head.html`.
 
+Finally, the preview's main page _template_ can also be overridden using the `previewMainTemplate`, which should return a reference to a file containing an `.ejs` template that gets interpolated with some environment variables. For an example, see the [Storbook's default template](https://github.com/storybookjs/storybook/blob/next/lib/core-common/src/templates/index.ejs).
+
 ## Sharing advanced configuration
 
 Change your `main.js` file to:
diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts
index 15b3431c584d..929593fecb76 100644
--- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts
+++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts
@@ -67,8 +67,8 @@ export default async ({
   const logLevel = await presets.apply('logLevel', undefined);
   const frameworkOptions = await presets.apply(`${framework}Options`, {});
 
-  const headHtmlSnippet = await presets.apply('previewHeadTemplate');
-  const bodyHtmlSnippet = await presets.apply('previewBodyTemplate');
+  const headHtmlSnippet = await presets.apply('previewHead');
+  const bodyHtmlSnippet = await presets.apply('previewBody');
   const template = await presets.apply<string>('previewMainTemplate');
   const envs = await presets.apply<Record<string, string>>('env');
 
diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
index 63dfb058f92d..844e0c984955 100644
--- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -64,8 +64,8 @@ export default async ({
   const logLevel = await presets.apply('logLevel', undefined);
   const frameworkOptions = await presets.apply(`${framework}Options`, {});
 
-  const headHtmlSnippet = await presets.apply('previewHeadTemplate');
-  const bodyHtmlSnippet = await presets.apply('previewBodyTemplate');
+  const headHtmlSnippet = await presets.apply('previewHead');
+  const bodyHtmlSnippet = await presets.apply('previewBody');
   const template = await presets.apply<string>('previewMainTemplate');
 
   const babelLoader = createBabelLoader(babelOptions, framework);
diff --git a/lib/core-server/src/presets/common-preset.ts b/lib/core-server/src/presets/common-preset.ts
index 589dce355e8d..f89e72bcda39 100644
--- a/lib/core-server/src/presets/common-preset.ts
+++ b/lib/core-server/src/presets/common-preset.ts
@@ -20,7 +20,7 @@ export const babel = async (_: unknown, options: Options) => {
 
 export const logLevel = (previous: any, options: Options) => previous || options.loglevel || 'info';
 
-export const previewHeadTemplate = async (base: any, { configDir, presets }: Options) => {
+export const previewHead = async (base: any, { configDir, presets }: Options) => {
   const interpolations = await presets.apply<Record<string, string>>('env');
   return getPreviewHeadTemplate(configDir, interpolations);
 };
@@ -29,7 +29,7 @@ export const env = async () => {
   return loadEnvs({ production: true }).raw;
 };
 
-export const previewBodyTemplate = async (base: any, { configDir, presets }: Options) => {
+export const previewBody = async (base: any, { configDir, presets }: Options) => {
   const interpolations = await presets.apply<Record<string, string>>('env');
   return getPreviewBodyTemplate(configDir, interpolations);
 };