Skip to main content
More in Learn

Item Relation Component

The item relation component allows you to semantically link to products, product variants, documents, and folders that are related to a given item in some fashion.

Item Relation Component Usage

Here are some examples of when the item relation component may be useful:

  • Linking to related products
  • Creating product/accessory bundles
  • Linking to related articles and blog posts (documents)
  • Linking to manufacturers’ websites

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.
  • Description - An optional description of what the component should contain. This will be visible to anyone who adds content to the component later.
  • SKU Min/Max - Optionally set minimum and/or maximum limits on the number of SKUs (product variants) that may be added to this component.
  • Items Min/Max - Optionally set minimum and/or maximum limits on the number of items (products, documents, or folders) that may be added to this component.
  • Accepted shape(s) - If specified, only items built from these shapes can be added to the component.
  • Quickselect folder(s) - Optionally specify one or more folders from your catalogue that will be used to offer a fixed set of choices to the content editor. Click the Open catalogue button, browse to a folder in the left-hand panel, then drag and drop it onto the component.
  • Localized Content - If Yes, then you can store different items for each language set up within your tenant. If No, then the same item(s) will be shared across all languages.
Item relation component on shape

When adding content to this component, you can click on the Items and SKUs labels to switch between adding items (products, documents, and folders) and SKUs (product variants). The items that you drag and drop from the catalogue will be added to the component as long as all shape and min/max requirements are met. When you drag a product onto the SKUs section, you'll be prompted to choose specific product variant(s) to add.

Once items and product variants have been added, you can drag and drop to reorder them as desired. You can also click the action button (
) beside any variant to browse to the product in the catalogue, add more variants from the same product, or to remove the variant.

Item relation add SKUs

If one or more Quickselect folders was specified, you'll see the folder’s contents either listed side by side (if there are fewer than 8 items) or in a drop-down accessible by clicking into the search tool (if there are more than 8 items), as long as the folder contents match any accepted shape(s) specified. You may click on these options to easily add them to the component without having to browse through the catalogue for them. However, you’re not limited to these items. You may still add any items from the catalogue as long as they satisfy any shape or min/max requirements specified. To cycle between multiple Quickselect folders, use the drop-down menu on the bottom left of the component.

To remove an item from the component, hover over it, then click on the X in the top-right corner.

Item relation component with Quickselect folder

Catalogue API Access

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

Check Out Our Semantic Relations Demo

People showing thumbs up

Need further assistance?

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

Join our slack community