{"section":"tutorials","requestedLocale":"en","requestedSlug":"creating-a-custom-page-in-legacy-cms-stores","locale":"en","slug":"creating-a-custom-page-in-legacy-cms-stores","path":"docs/en/tutorials/storefront/layout/creating-a-custom-page-in-legacy-cms-stores.md","branch":"main","content":"This guide describes how to create a custom page in stores developed with [CMS Portal (Legacy)](https://help.vtex.com/docs/tracks/legacy-cms-portal). By following these instructions, you'll be able to set up a new page, link a template, and make it available in a custom URL.\n\n## Instructions\n\n### Configure the template\n\n1. In the VTEX Admin, go to **Storefront > Layout**.\n2. In the **Layout** section, click **CMS > HTML Templates**.\n3. Decide whether you will:\n * Reuse an existing template that already has the necessary layout.\n * Create a specific new template for the custom page. If you want to create a new template, follow the instructions in the guide [Creating and editing a page template](https://help.vtex.com/docs/tutorials/how-to-create-a-page-template).\n4. Open the template that will be used on the custom page and configure the structure per the desired design:\n * Add placeholders or content components, such as banners, HTML boxes, and product shelves.\n * Configure the required options, such as title, meta tags, or layout options provided by the [native controls](https://developers.vtex.com/docs/guides/list-of-controls-for-templates) of Legacy CMS.\n5. Click `Save Template` to save the template.\n\n> ℹ️ Learn more in [What are templates?](https://help.vtex.com/docs/tutorials/what-are-templates)\n\n![new-layout-en](https://cdn.jsdelivr.net/gh/vtexdocs/help-center-content@main/docs/en/tutorials/storefront/layout/new-layout-en.png)\n\n### Create the custom page URL\n\nNow, you need to create the custom page URL path:\n\n1. In the VTEX Admin, go to **Storefront > Layout**.\n2. In the **Layout** section, go to **CMS > Sites and Channels**.\n3. Click the desired website.\n4. Click the root folder (`/`).\n5. On the right side of the screen, click `new folder`.\n6. Complete the fields based on the guidelines below:\n * **Folder Name:** URL path.\n * **Marketing Context (Default):** Defines whether the page can be accessed by [UTM](https://help.vtex.com/docs/tutorials/what-are-utm-source-utm-campaign-and-utm-medium) parameters. This field is optional.\n * **Search Context (Default):** Adds search parameters.\n * **Protocol:** Defines the communication protocol between a web server and a web browser. Recommended: `HTTPS`.\n * **Cache Type:** Defines the browser cache storage behavior. Recommended: `Local and Remote`.\n * **Authentication Required?:** Defines whether the page can be accessed only after user authentication. If this option is enabled, only authenticated users can access the page.\n7. Click `Save Folder` to save the new page.\n\n![new-folder-en](https://cdn.jsdelivr.net/gh/vtexdocs/help-center-content@main/docs/en/tutorials/storefront/layout/new-folder-en.gif)\n\n### Create the layout for the new page\n\nNow, you need to create a layout and link it to the template you configured in the [first step](#configure-the-template):\n\n1. Click the folder created in the [previous step](#create-the-custom-page-url).\n2. On the right side of the screen, click `new layout` to create a new layout.\n3. Complete the fields based on the guidelines below:\n * **Layout name:** Layout name in the CMS.\n * **Body Class:** (Optional) Defines a CSS class applied to the page `` element used to customize the style on the frontend.\n * **Template:** Select the HTML template configured in the [first step](#configure-the-template).\n * **Active:** If you check this box, the page becomes active and visible through the URL.\n * **Default page:** If you check this box, the page will be considered as the default page for the folder (for example, the homepage of a specific directory).\n4. Click `Save Layout` at the top of the page to save the layout.\n\nTo learn more, see the guide [Associating a template with a layout](https://help.vtex.com/docs/tutorials/associating-a-template-with-a-layout)."}