In this lesson, you will build all components the project needs. These components must exist before you can attach them to models in Lesson 4.2.

#Related Products

The Related Products component enables product pages to display other products a buyer might be interested in. It contains a read-only title field and a reference field that connects to other Product entries.

1. In the Schema editor, click +Add next to Components.

2. Provide the following information, and click Add Component to save:

   Field	Input
   Display Name	Related Products
   API ID	RelatedProduct
   Plural API ID	RelatedProducts

3. Add the following fields to the Related Products component:

   Single line text - Title:

   Field	Input
   Display name	Title
   Use as title field	Select checkbox
   Make field required	Select checkbox
   Set initial value	Select checkbox, and enter Related Products in the initial value field
   Field visibility	Read only

   The read-only title with an initial value ensures every instance of this component displays the same heading without editors being able to change it.

   Reference - Products:

   Field	Input
   Reference type	Allow only one model to be referenced
   Model to reference	Product
   Reference directions	One-way reference
   Allow multiple Products per RelatedProduct	Select checkbox
   Display name	Products
   API ID	products
   Description	Add 4 related products here
   Field visibility	Read / Write

4. Click Add to save.

Your Related Products component should look like this:

Related Products component

#Product type components

The store sells four product types: clothing, shoes, accessories, and decor. Each type requires different fields. Rather than creating four separate Product models, you will use four components, one per product type, and nest them inside a modular Product Variant component. The content editor then presents only the fields relevant to the selected product type.

These four components use the enumerations created in Lesson 3.1.

#Clothing

1. Click +Add next to Components.

2. Provide the following information, and click Add Component to save:

   Field	Input
   Display Name	Clothing
   API ID	Clothing
   Plural API ID	ClothingItems

3. Add the following fields:

   Enumeration - Size:

   Field	Input
   Display name	Size
   API ID	Auto-completed. Leave as is.
   Enumeration	Clothes size
   Make field required	Select checkbox

   Enumeration - Color:

   Field	Input
   Display name	Color
   Enumeration	Wearable items color
   Make field required	Select checkbox

Your Clothing component should look like this:

Clothing component

#Shoes

1. Click +Add next to Components.

2. Provide the following information, and click Add Component to save:

   Field	Input
   Display Name	Shoes
   API ID	Shoe
   Plural API ID	Shoes

3. Add the following fields:

   Enumeration - Size:

   Field	Input
   Display name	Size
   Enumeration	Shoes size
   Make field required	Select checkbox

   Enumeration - Color:

   Field	Input
   Display name	Color
   Enumeration	Wearable items color
   Make field required	Select checkbox

Your Shoes component should look like this:

Shoes component

#Accessories

1. Click +Add next to Components.

2. Provide the following information, and click Add Component to save:

   Field	Input
   Display Name	Accessories
   API ID	Accessory
   Plural API ID	Accessories

3. Add the following field:

   Enumeration - Color:

   Field	Input
   Display name	Color
   Enumeration	Wearable items color
   Make field required	Select checkbox

Your Accessories component should look like this:

Accessories component

#Decor

1. Click +Add next to Components.

2. Provide the following information, and click Add Component to save:

   Field	Input
   Display Name	Decor
   API ID	Decor
   Plural API ID	DecorItems

3. Add the following field:

   Enumeration - Color:

   Field	Input
   Display name	Color
   Enumeration	Decor items color
   Make field required	Select checkbox

Your Decor component should look like this:

Decor component

#Product Variant

The Product Variant component contains a modular component field that presents Clothing, Shoes, Accessories, or Decor based on the product type an editor selects. This is the component that makes a single Product model work for all four product types.

1. Click +Add next to Components.

2. Provide the following information, and click Add Component to save:

   Field	Input
   Display Name	Product Variant
   API ID	ProductVariant
   Plural API ID	ProductVariants

3. Add the following field:

   Modular component - Product type:

   Field	Input
   Display name	Product type
   API ID	productType
   Description	Select the product type to reveal fields
   Select allowed components	Clothing, Shoes, Accessories, Decor

4. Click Add to save.

Your Product Variant component should look like this:

Product Variant component

#Button

The Button component holds a text label and a URL. It is used inside the Call to Action component in the next step.

1. Click +Add next to Components.

2. Provide the following information, and click Add to save:

   Field	Input
   Display Name	Button
   API ID	Button
   Plural API ID	Buttons

3. Add the following fields:

   Single line text - Text:

   Field	Input
   Display name	Text
   Localize field	Select checkbox

   Slug - URL:

   Field	Input
   Display name	URL
   Match a specific pattern	Select checkbox, then select URL from the dropdown
   Custom error message	Input value does not match the expected format.

Your Button component should look like this:

Button component

#Call to Action

The Call to Action component is used as a page section on Landing pages. It embeds the Button component created in the previous step.

1. Click +Add next to Components.

2. Provide the following information, and click Add Component to save:

   Field	Input
   Display Name	Call to Action
   API ID	CallToAction
   Plural API ID	CallToActions

3. Add the following fields:

   Single line text - Heading:

   Field	Input
   Display name	Heading
   Localize field	Select checkbox

   Rich Text - Body:

   Field	Input
   Display name	Body
   Localize field	Select checkbox

   Asset picker - Image:

   Field	Input
   Display name	Image

   Basic component - Button:

   Field	Input
   Display name	Button
   Select component	Button

Your Call to Action component should look like this:

CTA component

#Product Grid

The Product Grid component is used as a page section on Landing pages. It displays a headline, a description, and a set of Product references.

1. Click +Add next to Components.

2. Provide the following information, and click Add Component to save:

   Field	Input
   Display Name	Product Grid
   API ID	ProductGrid
   Plural API ID	ProductGrids

3. Add the following fields:

   Single line text - Headline:

   Field	Input
   Display name	Headline
   Localize field	Select checkbox

   Rich Text - Description:

   Field	Input
   Display name	Description

   Reference - Products:

   Field	Input
   Reference type	Allow only one model to be referenced
   Model to reference	Product
   Reference directions	One-way reference
   Allow multiple Products per ProductGrid	Select checkbox
   Display name	Products
   API ID	products
   Field visibility	Read / Write

Your Product Grid component should look like this:

Product Grid component

#Link component

The Link component is included in the cloned project. It already contains two fields: Display text and External URL. You need to add a Reference field to it that connects it to the Blog post, Landing page, and Product models. This reference field could not be included in the original clone because it references models that did not exist until lesson 1.2.

This is the same layered schema pattern seen in lesson 1.2. Models and components are built in layers because some connections can only be made after the things they connect exist.

1. In the Schema editor, under the Components section, select the Link component from the left sidebar.

2. From the right sidebar, add a Reference field with the following information:

   Field	Input
   Reference type	Allow multiple models to be referenced
   Model to reference	Blog post, Landing page, Product
   Reference directions	One-way reference
   Relation cardinality	To one
   Display name	Page
   API ID	page
   Field visibility	Read / Write

3. Click Add to save.

Your finished Link component should look like this:

Link component

#What's next

Lesson 4.2 - Add components to your models

Or, go to the Tutorial overview for the full lesson list.