Create a site template for the XM Cloud Dashboard

You can create site templates in XM Cloud that have basic content and a basic presentation to simplify the site creation process. Templates usually include shared designs and branding, contact information, navigation, and some partially designed pages.

In this example, you create a template for a small and medium-sized business (SMB) website by copying the Basic Site template that is included when you create an environment using the XM Cloud starter kit. Although using the starter kit or copying an existing template is not always necessary, either approach can accelerate processes. Even if you don't use these options, you can still use this walkthrough to understand how site templates are created in XM Cloud, so you can follow any steps that are relevant to your needs.

This walkthrough describes how to:

  1. Upload media to the media library

  2. Create branch templates

  3. Create scaffoldings

  4. Update the PowerShell script

  5. Update the site template thumbnail

Before you begin

  • Prepare the image files you will use in the new site template, such as banners and background images.

  • Set the value of the SITECORE_SPE_ELEVATION environment variable to Allow. This allows you to edit the site template PowerShell scripts. Redeploy your environment for the change to take effect.

  • On the Content Editor ribbon, on the View tab, make sure that the Standard fields check box is selected.

Upload media to the media library

You start by uploading image assets into the media library. You'll use these assets in page elements such as a header or footer, or as background images, logos, or other types of images reused across the template. We recommend you also upload a thumbnail image you want to display to site administrators when they create a site based on the new template.

To upload images to the media library:

  1. In the Content Editor, right-click Media Library/Feature/Headless Experience Accelerator and click Insert > Media folder.

  2. Enter a name for the new folder - you'll use this name when creating the various items needed for this template. For this example, name it SMB site.

  3. Upload the media files by clicking Upload file to upload one file or Upload files (advanced) for multiple files.

  4. For accessibility purposes, we recommend that you click each image and enter descriptive text in the Alt field.

Create branch templates

Branch templates are used as part of content modelling to create items with a hierarchy of subitems, and can include default values. In this example, you'll create the branch templates by copying the existing templates from the XM Cloud basic site.

To create and modify branch templates:

  1. In the Content Editor, expand the Templates/Branches/Feature/Headless Experience Accelerator folder.

  2. Right-click the Basic Site folder and click Duplicate.

  3. Enter a name for the new folder, such as SMB site.

  4. Expand the new folder and make sure it includes About Data, Footer, Header, Home Data, and Styles.

    New branch templates in the SMB site folder

  5. Replace the default site images with the relevant image files you uploaded earlier. For example, expand Home Data > Data, click Image 1, then click Browse and select the new image from the media library, and click Save in the top-left corner.

  6. Modify other elements of Home Data as needed. For example, change PromoLeft by clicking Show editor and entering the desired text.

  7. Change the other branch templates as needed: Header, Footer, and About Data.

Create scaffoldings

Similar to previous steps, you'll create a new scaffolding by duplicating the basic site one. The scaffolding includes modules and actions. Remember to frequently save your changes by clicking Save in the top-left corner.

To create scaffoldings:

  1. Navigate to sitecore/System/Settings/Feature/Headless Experience Accelerator. Right-click the Basic Site folder and click Duplicate. Enter a name for the new scaffolding folder, such as SMB site.

  2. Expand the new SMB site folder and click the Basic Site Setup item.

  3. Rename the item to match the name of your new site template (for example, SMB site setup), and change the Name field too.

    The site setup item in the new scaffolding for an XM Cloud site template

  4. The copied actions are still connected to the Basic Site actions. To change that:

    1. Click the Add About action.

    2. In the Template section, in the Selected list on the right, there's an About Data item copied over from the basic site. Click it, then click the left arrow to remove it.

    3. In the All list on the left, navigate to Templates/Branches/Feature/Headless Experience Accelerator and expand the new folder name (for example, SMB site).

    4. Double-click About Data to move it to the Selected list, then save.

    5. Repeat the process for other actions (for example, select the Add Footer Partial action to the Footer branch template).

  5. In the new site template scaffolding folder (for example, SMB site), open the Templates folder and select the template. This template includes information that is visible to content authors in the Sites dashboard when they create a new site based on the template. Update its description to match the new site template (for example, A site template for small and medium businesses).

  6. In the same window, in the Site Modules section, in the Selected list on the right, find the Basic Site Setup and remove it.

  7. In the All list on the left, navigate to Settings/Feature/Headless Experience Accelerator and open the new template folder (for example, SMB site). Move the new setup item (SMB Site Setup) to the Selected list. Click Save in the top-left corner.

    Selecting setup items for the new site template

  8. In the Content field, a JSON array defines what site administrators see in the Sites application when creating a site based on this template, and you can change it. For example, this definition:

    Content definition of a site template

    Shows up as this content when creating a site based on the template:

    List of elements included in a site template when creating a site based on the template

Update the PowerShell script

Because this template is based on an existing one, you need to rename items in the PowerShell script to match the names you gave them in the Content Editor.

To update the PowerShell script:

  1. Still in the Content Editor, open sitecore/System/Modules/PowerShell/Script Library/JSS SXA. Right-click Basic Site and click Duplicate. Enter a name for the new script, such as SMB site.

  2. Expand the new script > Functions and click Add Home Renderings.

    New PowerShell script for a site template in XM Cloud

  3. In the Scripting section, select and copy the entire script body, then paste it into a code editor, such as Visual Studio Code.

  4. Search the code for references to Basic Site and replace them with the new site template name (for example, SMB site). Select the edited code, copy it, and paste it back into the Scripting section, overwriting the old contents.

  5. Open sitecore/System/Settings/Feature/Headless Experience Accelerator and expand the new template folder you created earlier (for example, SMB site). Expand the new site setup and click Add Home renderings.

  6. In the Script section, in the Selected column, select Add Home Renderings and remove it by clicking the left arrow. This rendering is associated with the basic site template.

  7. In the Script section, in the All column, expand JSS SXA, then your new site template script, and Functions. Select Add Home Renderings and click the right arrow to move it to the Selected column.

    Updating the Add Home Renderings script for the new site template in XM Cloud

Update the site template thumbnail

If you added a thumbnail image to be displayed to administrators who create sites based on your template, you'll now assign that image to the template.

To update the site template thumbnail:

  1. Open sitecore/System/Settings/Feature/Headless Experience Accelerator and expand the new site template folder.

  2. Expand Templates and select the new site template.

  3. In the Content area, scroll down and expand the Appearance section. Upload the thumbnail from the media library.

    Upload a thumbnail for your new XM Cloud site template

  4. Click Save in the top-left corner.

Your new site template is ready and usable to create new sites. You can now continue to edit the template, such as adding base pages, editing the header or footer, or changing designs.

Do you have some feedback for us?

If you have suggestions for improving this article,