Skip to main content
More in Learn

Choice Component

The choice component allows you to semantically group multiple components, but only allows one of those components to be used at a time. This enables polymorphic components when editing the content.

Choice Component Usage

With the choice component, you can define shapes and/or pieces that allow editorial users to, for instance, manage different types of hero media like an image, video, or relation to a richer media item. This still maintains semantic integrity with all choices being grouped as hero, but the editorial user can only select one when creating the item.

To use another example: there are different sets of properties that describe a TV vs. a refrigerator. The editorial user can click on the appropriate set of properties to define during product creation.

Choice component on shape
Edit choice component

When adding this component to a shape or piece, you can specify the following:

  • Name (required) - A name for the component.
  • Identifier - String that will be generated based on the component name when shape/piece is created or updated. You’ll use the identifier to reference the component programmatically.
  • Localized Structure - If set to Yes, then the chosen component and its content may vary for each language configured within your tenant, and all components within the choice will automatically have their localization properties set to Yes as well. If set to No, then the same component/content will be shared across languages, and different localization properties can be assigned individually to each nested component.
  • Component(s)/Piece(s) - At least one component or piece must be added to the choice. You can click and drag to reorder components/pieces, or use the action button (...) to delete them.

Based on your configurations, the choice will be labeled with either “Unified Structure” (same choice/content for all languages) or “Localized structure” (the choice/content may differ across languages).

Nesting with Choice Components

Choice components come with a powerful nesting capability. You can add them to pieces to create sophisticated multi-level structures. Currently, four levels of nesting are supported. The diagram below shows the different combinations that are possible between pieces and structural components.

The components on the fourth level of nesting may only contain non-structural components. A non-structural component is any component that isn't a chunk or choice, such as single line or rich text. A full list of non-structural components can be found here.

4-level nesting schema

The screenshots below show some examples of nested structures for product properties (food, in this case) and flexible marketing content.

Nesting example 1
Nesting example 2

Catalogue API Access

Once created, choice components and their content are accessible via the Catalogue API. Refer to our sample query for retrieving choice component content, and to the API docs at https://api.crystallize.com/your-tenant-identifier/catalogue for more information.

People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community