# Lesson 1.2 - Build your content models

Create the base content models and add their initial fields in the Hygraph schema editor.

In this lesson, you will create the base content models for the e-commerce project. These models are intentionally incomplete at this stage. References, components, and remote fields are added in later lessons.

**Warning:**
Every Hygraph project includes two system models: **Asset** and **Query**. These cannot be deleted, but you can add fields to them. The **Asset** model stores images. The **Query** model is where top-level remote fields are configured. You can create models to determine the structure of your content. You can create, rename, edit, and delete them.

## Asset model

Before creating models, you need to add two fields to the **Asset** model. Product images require alt text and captions. Both fields are localized, so translated values can be added when Spanish localization is configured in lesson 6.2.

[Video: Asset model - Alt text](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmnn9whh8jaen07w505t6k2ux)

1. In your Hygraph project, click **Schema**, and then under **Models**, click **Asset**.
2. In the right sidebar, click **+Add** next to **Single line text**. Provide the following information, and click **Add** to save:

    | Field | Input |
    |---|---|
    | Display name | Alt text |
    | API ID | altText |
    | Description | Add alternative text for the image here |
    | Localize field | Select checkbox |

3. Add a second `Single line text` field for the caption, and click **Add** to save:

    | Field | Input |
    |---|---|
    | Display name | Caption |
    | API ID | caption |
    | Description | Add image caption here |
    | Localize field | Select checkbox |

Your Asset model should look like this:

![Your Asset model](https://hygraph.com/images/docs/getting-started/asset-model.png)

## Product

The `Product` model holds information for product listings. 

[Video: Add fields to Product model](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/guE2faIRSFaUXdj2AflT)

To create the `Product` model, follow these steps:

1. Click **+Add** next to **Models**.
2. Provide the following information, and click **Add Model** to save:

    | Field | Input |
    |---|---|
    | Display name | Product |
    | API ID | Product |
    | Plural API ID | Products |
    | Description | Tutorial project Product model |

3. Add the following fields to the `Product` model:

    **Single line text** - `Product name`:

    | Field | Input |
    |---|---|
    | Display name | Product name |
    | API ID | Auto-completed. Leave as is. |
    | Use as title field | Select checkbox |
    | Localize field | Select checkbox |
    | Make field required | Select checkbox |
    | Set field as unique | Select checkbox |

    **API IDs:**
    Each API ID is a unique identifier across the project. The system will not allow duplicates. Display names do not have this restriction, but keeping them descriptive helps collaborators navigate the schema.

    **Slug** - `Product Slug`:

    | Field | Input |
    |---|---|
    | Display name | Product Slug |
    | API ID | Auto-completed. Leave as is. |
    | Lowercase | Leave selected |
    | Make field required | Select checkbox |
    | Set field as unique | Select checkbox |
    | Match a specific pattern | Select checkbox, then select `Slug` from the dropdown |
    | Custom error message | Input value does not match the expected format. |

    **Asset picker** - `Product image`: 

    | Field | Input |
    |---|---|
    | Display name | Product image |
    | Allow multiple assets | Select checkbox |

    **Rich Text** - `Product description`:

    | Field | Input |
    |---|---|
    | Display name | Product description |
    | API ID | Auto-completed. Leave as is. |
    | Enable embedding | Select checkbox. Select the **Asset** and **Product** models from the dropdown. |
    | Localize field | Select checkbox |

    **Enabling embedding on the Product description field** allows editors to embed images and product entries directly in the description body. The Product category model does not exist yet, so you will add it after creating that model.

    **Float** - `Product price`:

    | Field | Input |
    |---|---|
    | Display name | Product price |
    | API ID | Auto-completed. Leave as is. |

Your Product model should look like this:

![Your Product model so far](https://hygraph.com/images/docs/getting-started/product-model-initial-fields.png)

This model is not finished. A product variant component is added in lesson 4 and a reviews remote field in lesson 5.

## Product category

The `Product category` model holds categories that products are assigned to. It connects to the `Product` model through a reference, which we configure in lesson 2.

To create the `Product category` model, follow these steps:

1. Click **+Add** next to **Models**.
2. Provide the following information, and click **Add Model** to save:

    | Field | Input |
    |---|---|
    | Display Name | Product category |
    | API ID | ProductCategory |
    | Plural API ID | ProductCategories |
    | Description | Select a product category |

3. Add the following fields to the `Product category` model:

    **Single line text** - `Category name`:

    | Field | Input |
    |---|---|
    | Display name | Category name |
    | Use as title field | Select checkbox |
    | Localize field | Select checkbox |
    | Make field required | Select checkbox |
    | Set field as unique | Select checkbox |

    **Slug** - `Slug`:

    | Field | Input |
    |---|---|
    | Display name | Slug |
    | Lowercase | Leave selected |
    | Make field required | Select checkbox |
    | Set field as unique | Select checkbox |
    | Match a specific pattern | Select checkbox |
    | Custom error message | Input value does not match the expected format. |

    **Rich Text** - `Description`:

    | Field | Input |
    |---|---|
    | Display name | Description |
    | Localize field | Select checkbox |

Your `Product category` model should look like this:

![Your Product category model so far](https://hygraph.com/images/docs/getting-started/product-category-model-fields.png)

Now return to the `Product` model and edit the `Product description` Rich Text field. Add **Product category** to the **Enable embedding** dropdown.

![Product category in Rich Text embeds](https://hygraph.com/images/docs/getting-started/product-category-rich-text.png)

**Schema building is not always linear.** Models are interconnected, and you will sometimes need to return to an earlier model after creating a later one. This is expected.

## Blog post

The Blog post model holds articles that promote products.

To create the `Blog Post` model, follow these steps:

1. Click **+Add** next to **Models**.
2. Provide the following information, and click **Add Model** to save:

    | Field | Input |
    |---|---|
    | Display Name | Blog Post |
    | API ID | BlogPost |
    | Plural API ID | BlogPosts |
    | Description | Articles to promote our products |

3. Add the following fields to the `Blog Post` model:

    **Single line text** - `Title`:

    | Field | Input |
    |---|---|
    | Display name | Title |
    | Use as title field | Select checkbox |
    | Localize field | Select checkbox |
    | Make field required | Select checkbox |
    | Set field as unique | Select checkbox |

    **Slug** - `Slug`:

    | Field | Input |
    |---|---|
    | Display name | Slug |
    | Generate slug from template | Select checkbox |
    | Slug template | `{title}` |
    | Lowercase | Select checkbox |
    | Match a specific pattern | Select checkbox, then select `Slug` from the dropdown |
    | Custom error message | Input value does not match the expected format. |

    **Rich Text** - `Body`:

    | Field | Input |
    |---|---|
    | Display name | Body |
    | Localize field | Select checkbox |
    | Enable embedding | Select checkbox. Select **Blog Post**, **Product**, and **Product category** from the dropdown. |

Your Blog post model should look like this:

![Blog post model fields](https://hygraph.com/images/docs/getting-started/blog-post-model-fields.png)

## Seller information

The Seller information model holds business details referenced from the landing page.

To create the `Seller information` model, follow these steps:

1. Click **+Add** next to **Models**.
2. Provide the following information, and click **Add Model** to save:

    | Field | Input |
    |---|---|
    | Display Name | Seller information |
    | API ID | SellerInformation |
    | Plural API ID | SellerInformations |

3. Add the following fields to the `Seller information` model:

    **Single line text** - `Business name`:

    | Field | Input |
    |---|---|
    | Display name | Business name |
    | Use as title field | Select checkbox |
    | Localize field | Select checkbox |
    | Make field required | Select checkbox |

    **Slug** - `Slug`:

    | Field | Input |
    |---|---|
    | Display name | Slug |
    | Lowercase | Leave selected |
    | Make field required | Select checkbox |
    | Set field as unique | Select checkbox |
    | Match a specific pattern | Select checkbox, then select `Slug` |
    | Custom error message | Input value does not match the expected format. |

    **Asset picker** - `Business logo`:

    | Field | Input |
    |---|---|
    | Display name | Business logo |

    **Rich Text** - `Business description`:

    | Field | Input |
    |---|---|
    | Display name | Business description |
    | API ID | Auto-completed. Leave as is. |
    | Localize field | Select checkbox |

## Landing page

The Landing page model supports flexible page structures. It is intentionally minimal at this stage. Component fields and references are added in lessons 2 and 4.

1. Click **+Add** next to **Models**.
2. Provide the following information, and click **Add Model** to save:

    | Field | Input |
    |---|---|
    | Display Name | Landing page |
    | API ID | LandingPage |
    | Plural API ID | LandingPages |

3. Add the following fields to the `Landing page` model:

    **Single line text** - `Landing page title`:

    | Field | Input |
    |---|---|
    | Display name | Landing page title |
    | Use as title field | Select checkbox |
    | Localize field | Select checkbox |

    **Slug** - `Link`:

    | Field | Input |
    |---|---|
    | Display name | Link |
    | API ID | Auto-completed. Leave as is. |
    | Generate slug from template | Select checkbox |
    | Slug template | `{landingPageTitle}` |
    | Lowercase | Leave selected |
    | Set field as unique | Select checkbox |
    | Match a specific pattern | Select checkbox. Select **Custom** and enter: `^[a-z0-9\/]+(?:[-\/][a-z0-9]+)*$` |
    | Custom error message | Input value does not match the expected format. |

## Navigation

The Navigation model is included in the cloned project. At this stage it contains the `Nav ID` field, which is a slug field used as the navigation identifier. This model is incomplete. A way to hold navigation links is added in lesson 4.2 after creating the Link component.

## What's next

[Lesson 2 - References](https://hygraph.com/docs/getting-started/tutorial/tutorial-references-overview)

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