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.

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

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

#Product

The Product model holds information for product listings.

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

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

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

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

#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

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