Creating a component group

A component group can be created when you're using the same component layout across multiple pages, like a header or a footer.

The steps below will show you how to create your own component group.

Once you add a component group to a page, you can't edit anything specifically for that page. You have to universally edit the component group.

Creating a component group

  1. Open Templates on the dashboard, then select Component groups

ceedb5e Select component groups

  1. Click + New component group in the Component group section

ad1cd64 Click a new component group button

  1. Input a Name for your component group, add any data sources you need to, and then click Save

28a7a89 Input a name for your component group and click save

  1. Click the edit icon on the name of your new component group. This opens the component group builder

1c82185 Click the edit icon on your component groupd

  1. Add layout elements and Frontend components that you want to include in your component group, as well as edit any component settings

3429357 Add layout elements and Frontastic components to your component group

  1. Click Preview to see what your component group will look like, and then click Save

d68c201 Click save to save your component group

Your component group will now be available to use when you build your pages.

5a281e2 Use component group in page

If you use a component group that has an error, you won't see this error when editing a page version. We recommend checking your component groups regularly in case any errors come up.

Editing a component group

Once you've saved a component group, you can edit it at any time. Go to Templates, click on the edit icon on the name of your component group.

1dc7717 Click the edit icon on your component groupd

This opens the component group builder where you can edit the layout elements, Frontend components, and component settings. Preview your changes, click Publish, and then Publish changes.

Any changes will also update all page versions where the component group is used. Before publishing any changes to a component group, make sure you preview your page.

You can also edit the component group settings (name and data source filters) at any time. Click the more icon on the name of your component group:

33ab737 Click the more icon on your ocmponent group

Then select Settings.

80e13ef Then select the settings option in the dropdown

This opens a pop-up, and you can edit the settings. You can also see a list of the pages where your component group is used. Expand the Component usage section to see the list. Click the name of the page to be taken to the page builder.

ab63924 Expand the componeent group usage section to see where its used

Duplicating a component group

To duplicate a component group, hover on the name of your component group and click the more icon:

d8fb48d Click the more icon on your ocmponent group

Then select Duplicate:

1931a7a Then select duplicate to duplicate your componetn group

Input a new name and click Save:

b486604 Input a name and click save for your new component group

Once duplicated, click the edit icon to make the changes you'd like to. You can then add this component group to your page versions.

Deleting a component group

To delete a component group, hover on the name of your component group and click the trash can icon, then type DELETE to enable the Delete button:

2ec1975 Click the trash can icon to delete your component group but do this with caution

If you delete a component group that's being used on your pages, it'll be removed from those pages and might break your pages. Use the component usage feature to check your component group isn't being used on a page before deleting.

Composable Commerce
Getting StartedMerchant CenterTutorialsHTTP APIGraphQL APIImport & ExportSDKs & Client LibrariesCustom Applications
Getting StartedStudioDevelopingHTTP API
Sign upLog inSupportStatusOfferingTech BlogIntegrationsUser Research Program
Copyright © 2023 commercetools
Privacy PolicyImprint