# Lesson 4.1 - Build components

Create the components the eCommerce project needs, including product type variants, a CTA, a product grid, and navigation links.

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](https://hygraph.com/docs/getting-started/tutorial/tutorial-add-components-to-models).

**Build order matters:**
Some components depend on others. Build them in the order they appear in this lesson. `Clothing`, `Shoes`, `Accessories`, and `Decor` must exist before `Product Variant`. `Button` must exist before `Call to Action`. 

## 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.

[Video: Add Related Products component field](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/ixrjl62AQu9OVv2kOaHB)

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](https://hygraph.com/images/docs/getting-started/related-products-component.png)

## 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](https://hygraph.com/docs/getting-started/tutorial/tutorial-configure-enumerations).

### 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](https://hygraph.com/images/docs/getting-started/clothing-component.png)

### 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](https://hygraph.com/images/docs/getting-started/shoes-component.png)

### 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](https://hygraph.com/images/docs/getting-started/accessories-component.png)

### 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](https://hygraph.com/images/docs/getting-started/decor-component.png)

## 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](https://hygraph.com/images/docs/getting-started/product-variant-component.png)

## 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](https://hygraph.com/images/docs/getting-started/button-component.png)

## 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](https://hygraph.com/images/docs/getting-started/cta-component.png)

## 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](https://hygraph.com/images/docs/getting-started/product-grid-component.png)

## 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](https://hygraph.com/images/docs/getting-started/link-component-finished.png)

## What's next

[Lesson 4.2 - Add components to your models](https://hygraph.com/docs/getting-started/tutorial/tutorial-add-components-to-models)

Or, go to the [Tutorial overview](https://hygraph.com/docs/getting-started/tutorial/tutorial-overview) for the full lesson list.