---
title: "Copy and customize a rendering"
slug: "copy-and-customize-a-rendering"
abstract: "Learn how scaffolding lets you add custom renderings."
---
# Copy and customize a rendering

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

Because the standard SXA toolbox sections are overwritten with SXA updates, we recommend that you create a separate toolbox section for derivative renderings. You can do this by adding a new module to SXA.

<details>
<summary><h2>Add a new module</h2></summary>

To add a new module:

1. Navigate to */sitecore/system/Settings*, right-click **Features** or **Foundation**, and insert a new folder.
2. Right-click the new folder, click **Insert**, and click **Module**.
3. Enter a name and group the module under the new folder.

</details>

<details>
<summary><h2>Copy and customize a rendering</h2></summary>

To copy and customize a rendering:

1. To clone the rendering that you want to use, navigate to */sitecore/Layout/Renderings/* and right-click the rendering 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 rendering. |
|  | Add to module | Select the module the new rendering belongs to. Because the standard SXA toolbox sections are overwritten with SXA updates, we recommend that you add your own module for derivative renderings. |
|  | Rendering CSS class | Enter the CSS class for the rendering. |
| **Parameters** | Rendering Parameters | Select the rendering parameters copy mode:<br><br><ul><li>Inherit from existing rendering parameters– creates a new item and sets the `__Base template` to point to the source rendering parameters template.</li><li>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.</li></ul> |
| **Datasource** | Datasource | Select the data source copy mode:<br><br><ul><li>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 rendering only.</li><li>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.</li></ul> |
| **View** | View | Select the view copy mode:<br><br><ul><li>Use original MVC view file – uses the view from the prepopulated **Path to the rendering view** field. If the **View** field is not specified then the `StandardController` tries to resolve the view based on rendering the item name. Select this option when you only want to change the styling.</li><li>Copy MVC view file (specify path below) – copies the source view to a location specified in the **Path to rendering view** field. Select this option when you want to extend and/or modify the existing markup.</li><li>Select existing MVC view file (specify path below) – uses the view specified in the **Path to rendering view** field but does not create a copy.</li></ul> |
|  | Path to rendering view | Enter the location of the view. For example:<br><br>![Path to the rendering view example.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/104/sitecore-experience-accelerator/images/DE00B97D1449496AAAE3018E2A85F896.png) |

Now you can add the rendering to appear in the toolbox in your site.

</details>

<details>
<summary><h2>Add a rendering to the toolbox</h2></summary>

To add the rendering to the toolbox:

1. Navigate to the Presentation folder of your site and right-click **Available Renderings**.
2. Click **Insert** and click **Available Renderings**.
3. Enter the section name for the rendering that you want to add and click **OK**.
4. Click the new section that you just created, and in the **Data** section, click **Edit**.
5. In the **Select Item** dialog box, in the Renderings folder, click the relevant rendering, and click the right arrow to move it to the list of selected items. Click **OK**.

    ![Select Item dialog box](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/104/sitecore-experience-accelerator/images/153E66A89E8F477B8A9B065CB424262F.png)

    Your new rendering is now available for use in the Experience Editor.

    ![Special Promo component now available in EE.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/104/sitecore-experience-accelerator/images/A04D6A12500D4B1596BCD73A7298284D.png)

</details>