Copy and customize a component

With SXA, you can quickly create a copy of an SXA component by using the clone script. With a cloned component, you have an exact copy of the component definition item, rendering parameters template, data source templates, and branches. You copy the existing component, and you name and style it differently. This can be convenient, for example, when you want many Promo components that are all styled differently.

Before copying a component, we recommend that you add a new module for derivative components. This is to avoid that SXA updates overwrite the new component.

Add a new module

To add a new module:

  1. Navigate to /sitecore/system/Settings, right-click Features or Foundation, and insert a new folder.

  2. Right-click Features or Foundation, and then click Insert > Headless Module.

  3. In the dialog box, enter a name and, in the Add to module group list, select the folder you've just created.

  4. Click Proceed. The module is created.

Copy and customize a component

To copy and customize a rendering:

  1. To clone the component that you want to use, navigate to /sitecore/Layout/Renderings/ and right-click the component that you want to clone.

  2. Click Scripts, and click Clone Rendering.

  3. In the Create derivative rendering dialog box, fill in the following fields:

Tab

Field

Description

General

New rendering name

Enter the name for the new component.

Add to module

Select the module the new component belongs to.

Rendering CSS class

Enter the CSS class for the component.

Parameters

Rendering Parameters

Select the rendering parameters copy mode:

  • Inherit from existing rendering parameters– creates a new item and sets the __Base template to point to the source rendering parameters template.

  • Make a copy of original rendering parameters– creates a copy of the source rendering parameters in a new location. This enables you to extend, remove, and/or reorder parameters.

Datasource

Datasource

Select the data source copy mode:

  • Inherit from existing datasource – creates a new item and set its __Base template to point to the source data source template. Select this option when you want to change the styling of the component only.

  • Make a copy of original datasource – creates a copy of the source data source template in a new location. Select this option when you want to extend the standard data item with additional fields. For example, if you want to use an image field as a background.

After creating the copy of the component, make the component available in XM Cloud Pages or the Experience Editor, so that content authors can add the component to their webpages.

Do you have some feedback for us?

If you have suggestions for improving this article,