Creating a component group

A component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`. 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 groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`..

📘

Once you add a component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`. to a page, you can't edit anything specifically for that page. You have to universally edit the component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`..

Creating a component group

  1. Open Templates on the dashboard, then select Component groups
  1. Click + New component group in the Component group section
  1. Input a Name for your component group, add any data sources you need to, and then click Save
  1. Click the edit icon on the name of your new component group. This opens the component group builder
  1. Add layout elementslayout elements - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cells`. and Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. that you want to include in your component group, as well as edit any component settings
  1. Click Preview to see what your component group will look like, and then click Save

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

❗️

If you use a component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`. that has an error, you won't see this error when editing a page version. We recommend checking your component groupscomponent groups - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`. regularly in case any errors come up.

Editing a component group

Once you've saved a component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`., you can edit it at any time. Go to Templates, click on the edit icon on the name of your component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`..

This opens the component group builder where you can edit the layout elementslayout elements - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cells`., Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code., and component settings. Preview your changes, click Publish, and then Publish changes.

❗️

Any changes will also update all page versions where the component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`. is used. Before publishing any changes to a component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`., make sure you preview your page.

You can also edit the component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`. settings (name and data source filters) at any time. Click the more icon on the name of your component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`.:

Then select Settings.

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.

Duplicating a component group

To duplicate a component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`., hover on the name of your component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`. and click the more icon:

Then select Duplicate:

Input a new name and click Save:

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 groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`., hover on the name of your component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`. and click the trash can icon, then type DELETE to enable the Delete button

❗️

If you delete a component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`. 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 groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`. isn't being used on a page before deleting.


Did this page help you?