Page templates

Learn how to reuse the same page layout across page versions.

Page templates let you to create page versions from predefined models. This reduces the time required to create a page version.

For example, if you use the same header and footer components on all pages of your website, you can create a page template that includes them. Thus, when you create a page version from this page template, the header and footer components are already present.

Create a page template

You can create a page template in two ways:

Create a page template from the Templates area

To create a page template, follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Page templates.

    The Page templates pane in the Templates area

  2. Click + New page template: the Create new page template dialog opens.

  3. In the Page template name field, enter the name of the page template.

  4. Click Save: the page template is saved in the Page templates pane.

  5. In the Page templates pane, select the page template you created: the Page versions pane appears.

  6. In the Page versions pane, click + New page version: the Create page version dialog opens.

  7. In the Page version name field, enter the name of the page version associated with the page template.

    To be used and displayed, a page template must be associated at least with one page version. Page versions contain the actual layout of page templates.
    For ease of understanding and to avoid confusion in the following paragraphs, we will from now on refer to the page versions associated with page templates as page template versions.

  8. Click Save: the page builder opens.

  9. Edit the page template version as you need. Make sure you only add the UI elements that you want to use across multiple pages on your website.

  10. To preview the page template version click Preview. Then, click the save drop-down and select Save and make default. Click the back arrow to return to Templates.

Create a page template from an existing page version

If you want to turn an existing page version into a page template, you can do it from:

Use a page template

Once you have created a page template, you can use it to create a page version from the site builder. In the Layout drop-down of the Create page version dialog, you will find the page templates that were created in your commercetools Frontend project.

The available templates listed in the Layout drop-down of the Create page version dialog

After saving the page version data, the page builder opens. Here, the page will have the layout you set within the page template version. You can edit the page version you created as you wish.

Edit a page template

Edit a page template layout

To edit a page template layout, you must edit the layout of a page template version. To do so, follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Page templates.

  2. In the Page templates pane, select the page template to edit.

  3. In the Page versions pane, go to the section where the page template version is. Then, hold the pointer over the page template version and click the Edit icon: the page builder opens.

  4. In the page builder, edit the page template version as you wish, then click Publish changes.

  5. Click the back arrow to return to Templates.

    If you edit a page template version, the page versions that you created from the previous page template version do not update according to your changes. A page version is created independently from the page template, so it does not sync with the page template.

Edit a page template settings

You can edit the name of a page template and the environments in which the page template is available. To do so, follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Page templates.

  2. In the Page templates pane, click the Settings icon related to the page template to edit: the Page template settings dialog opens.

  3. Edit the settings as you need. Then, click Save.

To edit the settings of a page template version and to perform other management actions (for example, duplicate or archive the page template version), follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Page templates.

  2. In the Page templates pane, select the page template to edit.

  3. In the Page versions pane, go to the section where the page template version is. Then, hold the pointer over the page template version and click the More icon to display the available options.

Delete a page template

To delete a page template, follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Page templates.

  2. In the Page templates pane, click the Delete icon related to the page template to delete: the Delete page template? dialog opens.

  3. Click Delete.

When you delete a page template, the page versions that you created from the page template are not affected. A page version is created independently from the page template, so it does not sync with the page template once it has been created.