Stores consist of several pages, each with a unique layout and content. When you create a store in VTEX IO, several default pages with predefined URLs are available, such as:

• store.home: Homepage
• store.product: Product page
• store.search: Search results page
• store.account: Client account page
• store.login: Login page
• store.orderplaced: Order placed page

You can manage the title and template of each page in the Pages section of the CMS in the VTEX Admin.

You can also develop custom pages to meet your store's specific needs, such as landing pages for special campaigns or institutional pages.

In this guide, you'll learn how to create a new custom page for your Store Framework store.

As an example, consider that you want to create a custom About us page for your store with an image in the left column and a title and text in the right column:

First, define the template the new page will use. There are three template types:

• Product: For pages that display content for a single product, like a product detail page. When a new product is added, a product page is automatically generated.
• Product collections: For pages containing a group of products, such as the search result page.
• Standard: For pages with no specific product content, such as the homepage.

Even though Standard pages aren't directly linked to a specific product, they can display shelves or lists for any chosen group of products. The main difference is that the group of products shown on a standard page depend on the shelf settings, not on the URL query.

Then follow the steps below:

1. In your Store Theme's code, declare a new template within your blocks folder or blocks.jsonc file as follows:

2. Complete it with the blocks that will set the desired layout. For example:

For more information, see the Flex Layout documentation.

To make the new page accessible in your store, you must declare its path. You can do it by updating the Store Theme code or using the VTEX Admin.

Updating the Store Theme code

1. In your theme's source code, access the routes.json file. You can find it in the store folder.
2. In that file, add the path to the JSON file for the template you recently created:

3. Save your files.
4. Link the theme to a Development workspace. You'll be able to access and see your new page live through your workspace using the following format: {workspaceName}--{accountName}.myvtex.com/{pathName}.

Using the VTEX Admin

To set the new page path using VTEX Admin, you must first release the changes you made to create the template and install the new version of your Store Theme in a production workspace.

Once your changes are set up in a production workspace, you can use the CMS in the Admin to create the page path:

1. In the VTEX Admin, go to Storefront > Pages.
2. Click Create new.
3. Choose the desired URL and one of the templates you created, such as the About Us page template previously created.

A template only defines the page layout. Therefore, you can apply any new template to any page that accepts templates of the same type.

When editing any content using the CMS section, When editing content in the CMS, we recommend making your changes in a production workspace. Make sure you do not create your new custom page in the store's master workspace.

You can define your page content either by making changes directly in the Store Theme app or by using Site Editor in the VTEX Admin.

When editing directly in the Store Theme app, you can visualize your changes by linking the theme to your development workspace.

To edit the page in Site Editor, you can browse to your custom page or enter its URL in the Page URL field.

If you're satisfied with the changes to your Store Theme, make your new page publicly available. For detailed instructions, see the guide Making your theme content public.