# Lesson 4.2 - Add components to your models

Attach the components built in lesson 4.1 to the Product, Landing page, and Navigation models to complete the schema.

In this lesson, you will attach the components built in lesson 4.1 to the `Product`, `Landing page`, and `Navigation` models. After this lesson, the schema is structurally complete.

## Product

The `Product` model receives two component fields: `Product Variant` and `Related Products` as basic component fields. Both are basic because each field always contains a single, fixed component type — there is no editorial choice about which component fills the field.

1. In the Schema editor, open the `Product` model.
2. From the right sidebar, add a **Basic** component field with the following information, and click **Add** to save:

    | Field | Input |
    |---|---|
    | Display Name | Product Variant |
    | API ID | ProductVariant |
    | Select component | Product Variant |

3. Add a second **Basic** component field with the following information, and click **Add** to save:

    | Field | Input |
    |---|---|
    | Display Name | Related Products |
    | API ID | RelatedProduct |
    | Description | Add related products |
    | Select component | Related Products |

Your Product model should now look like this:

![Finished Product model with fields](https://hygraph.com/images/docs/getting-started/product-model.png)

## Landing page

The `Landing page` model receives a modular component field called `Stripes`. It is modular because editors need to choose which component fills each section, either a `Call to Action` or a `Product Grid`. Allowing multiple values means editors can add as many sections as needed, in any order.

1. In the Schema editor, open the **Landing page** model.
2. From the right sidebar, add a **Modular** component field with the following information, and click **Add** to save:

    | Field | Input |
    |---|---|
    | Display Name | Stripes |
    | API ID | stripes |
    | Description | Sections |
    | Allow multiple values | Select checkbox |
    | Select allowed components | Call to Action, Product Grid |

Your Landing page model should now look like this:

![Finished Landing Page model with fields](https://hygraph.com/images/docs/getting-started/landing-page-model.png)

## Navigation

The Navigation model was left incomplete in lesson 1.2. It has a Nav ID field but no way to hold navigation links. The Link component built in lesson 4.1 is what completes it.

1. In the Schema editor, open the **Navigation** model.
2. From the right sidebar, add a **Basic** component field with the following information, and click **Add** to save:

    | Field | Input |
    |---|---|
    | Display Name | Nav Link |
    | API ID | navLink |
    | Description | Navigation links |
    | Allow multiple values | Select checkbox |
    | Select component | Link |

The **Allow multiple values** setting is what enables the navigation to hold multiple links. Each link added in the content editor is a separate instance of the Link component.

Your `Navigation` model should now look like this:

![Finished Navigation model](https://hygraph.com/images/docs/getting-started/navigation-model.png)

Every model has the fields, references, and component fields it needs. 

## What's next

[Lesson 5 - Remote Sources](https://hygraph.com/docs/getting-started/tutorial/tutorial-remote-sources-overview)

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