# Manage component groups

Learn how to reuse Frontend component combinations across page versions.

Component groups let you create sets of Frontend components that you can use across multiple pages on your website. For example, you can use component groups if you use the same layout for the header and footer of your pages.

You can use component groups on your pages by adding them to page versions from the [page builder](/frontend-studio/using-the-page-builder.md#add-a-layout-element-or-a-component-group).

If in the page builder you use component groups that contain errors, you will not be warned about it. Check your component groups regularly to detect and correct any errors.

## Create a component group

To create a component group, follow these steps:

1. From the Studio home page or from the left menu, go to **Templates > Component groups**.

   ![The Component groups pane in the Templates area](https://docs.commercetools.com/frontend-studio/images/component-groups-area.png)

2. Click **+ New component group**: the **Create new component group** dialog opens.

3. In the **Component group name** field, enter the name of the component group.

4. If you need to add a data source to the component group, click **+ Add data source filter** in the **Data source** section: the [**data source filter editor**](/frontend-studio/using-the-data-source-filter-editor.md) opens.

5. Click **Save**: the component group is saved in the **Component groups** pane.

6. Click the **Edit** icon related to the component group you created: the [component group builder](/frontend-studio/using-the-component-group-builder.md) opens.

7. In the component group builder, define the structure and content of the component group. After you save the component group, it will be available in the [page builder](/frontend-studio/using-the-page-builder.md#add-a-layout-element-or-a-component-group).

## Edit a component group

### Edit a component group layout

To edit the layout of a component group, follow these steps:

1. From the Studio home page or from the left menu, go to **Templates > Component groups**.

2. Click the **Edit** icon related to the component group to edit: the [component group builder](/frontend-studio/using-the-component-group-builder.md) opens.

3. In the component group builder, edit the component group as you need.

Changes to the component group will update all page versions where it is used. Check the preview before saving your changes.

### Edit a component group settings

To edit the settings of a component group, follow these steps:

1. From the Studio home page or from the left menu, go to **Templates > Component groups**.

2. Click the **More** icon related to the component group to edit.

3. Click **Settings**: the **Component group settings** dialog opens.

4. Edit the settings as you need. Then, click **Save**.

## Duplicate a component group

To duplicate a component group, follow these steps:

1. From the Studio home page or from the left menu, go to **Templates > Component groups**.

2. Click the **More** icon related to the component group to duplicate.

3. Click **Duplicate**: the **Duplicate component group** dialog opens.

4. Edit the component group name. Then, click **Save**: the component group is saved in the **Component groups** pane.

5. Click the **Edit** icon related to the duplicate component group and edit it in the [component group builder](/frontend-studio/using-the-component-group-builder.md).

## Delete a component group

To delete a component group, follow these steps:

1. From the Studio home page or from the left menu, go to **Templates > Component groups**.

2. Click the **More** icon related to the component group. Then, click **Settings**: the **Component group settings** dialog opens.

3. In the **Component usage** section, make sure the **This component group isn't used on any pages** message is displayed. Then, close the **Component group settings** dialog.

   Deleting a component group that is used on one or multiple page versions might break them. Make sure the component group is not used before deleting it.

4. Click the **More** icon related to the component group to delete. Then, click **Delete**: the **Delete component group forever?** dialog opens.

5. In the text box, enter `DELETE`. Then, click **Delete**.

## Related pages

- [Area overview page with navigation](/frontend-studio.md)
- [Previous page: Page templates](/frontend-studio/page-templates.md)
- [Next page: Use the component group builder](/frontend-studio/using-the-component-group-builder.md)
- [Search documentation and API specs](/search.md)