---
title: "Use the Component wizard to create a custom rendering"
slug: "use-the-component-wizard-to-create-a-custom-rendering"
abstract: "Learn how to create your own component using the component wizard."
---
# Use the Component wizard to create a custom rendering

With SXA, you can quickly create a copy of an SXA rendering by [using the clone script](https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/copy-and-customize-a-rendering.html "Copy and customize a rendering"). This can be convenient, for example, if you want many Promo renderings that are all styled differently. If you want to create a custom rendering that is not similar to an existing rendering, you can also use the Component wizard.

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](https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/create-a-new-sxa-module--mvc-.html "Create a new SXA module (MVC)") to SXA.

> [!note]
> If you are running your Sitecore XP instance in a container, do not use the following method. Instead, create SXA modules and containers in a local development environment, and [deploy them to the container as a custom image](https://doc.sitecore.com/xp/en/developers/103/developer-tools/building-custom-sitecore-images.html).

To create a custom rendering using the Component wizard:

1. In the Content Editor, navigate to *sitecore/Layout/Renderings/Feature/* and create a folder for your custom rendering. This ensures that your rendering is not overwritten during SXA updates.
2. Right-click the folder that you just created, click **Insert**, and click **Component**.
3. In the wizard, fill out the following fields:

    | Tab | Field | Description |
    | --- | --- | --- |
    | GENERAL | Component name | Enter the name for the new rendering. |
    |  | Add to module | Select the module the new rendering belongs to. |
    |  | Rendering CSS class | Enter the CSS class for the rendering. |
    |  | Path to rendering view | By default, the view name in SXA is resolved as the rendering definition item name. To provide a custom path, enter the location of the view here. |
    | DATASOURCE | Datasource | Determine the data source origin by selecting one of the following options:<br><br><ul><li>**Use current page** - data source item reads data from the current page.</li><li>**Ask user for data source** - lets the content editor choose the data source.</li><li>**Automatically create data source under page** - stores the data source as a page relative data source item under a given page.</li></ul> |
    |  | Rendering template | Select the template. |
    |  | Base rendering parameters template | Select the base template. By default, the *Standard Rendering Parameters* template is selected. |
    |  | Base data source template | Select the data source template to specify the types of data sources users can create. |
    |  | Publishing grouping template | Helps with publishing complex data source structures that have children, for example, *Carousel*, *Tabs*, *Link List*, and *Gallery*. Can only be used if **Publishing Service** is enabled. |
    |  | Additional compatible templates | Enables you to select multiple templates for the data source. For example, for the Promo rendering, you could use the Promo templates but also other data sources, such as Text and Image. |
    | BEHAVIORS | Select Page as a data source | Lets you use a page as a data source. Select this option if you want the component to take content from the current page. |
    |  | Background image | Enables you to [add a background image](https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/enable-adding-a-background-image-to-a-rendering.html) for the component. It will add a base template to your data source template that contains a field that lets editors pick an image used as background. |
    |  | Select data source behavior | Determines whether users can set [data source behavior](https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/configure-a-snippet.html). |
    |  | Component variants | Determines whether the rendering can have variants. |
    |  | Dynamic placeholders | Enables a [dynamic placeholder](https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/add-a-dynamic-placeholder-to-a-rendering-variant.html) for a rendering. |