In this lesson, you will populate the e-commerce project with content. The fields, dropdowns, references, and components in the content editor are a direct result of the schema built in lessons 1 through 5. If anything looks unexpected, it is worth returning to the relevant schema lesson to verify the configuration.

The lesson is structured in stages because some content depends on other content existing first. Products cannot have related products until other products exist. Landing pages cannot reference blog posts or categories until those entries are published. Follow the sections in order.

#Assets

The cloned project already contains product images. You need to add alt text and a caption to the headband image to get started.

1. In your Hygraph project, click Assets.

2. Type headband in the search filter.

3. Open the first result to edit the asset.

4. Fill in the following fields and click Save & Publish:

   Field	Input
   Alt text	Cotton headband
   Caption	A soft white cotton headband

5. Click the back arrow next to Edit Asset at the top left to return to the assets table.

6. Click the X next to the search filter to reset it.

#Product categories

The Product category model was created in lesson 1.2 and connected to the Product model through a many-to-many reference in lesson 2.1. Each category entry created here can later be assigned to multiple products, and each product can belong to multiple categories.

No product entries exist yet, so you will create the categories first and add product assignments later.

1. Go to Content, and under Default Views, click Product category.

2. Click + Add entry.

3. Create the following entry and click Save & Publish:

   Field	Input
   Category name	Clothes
   Slug	clothes
   Description	You will find clothes here

Repeat the process for each of the following categories:

Some categories overlap by design. Because the reference between products and categories is many-to-many, one product can belong to both New arrival and Sportswear at the same time.

Your Product categories view should now look like this:

Product categories in the content editor with entries

#Seller information

The Seller information model holds business details that the landing page references. Create a single entry.

1. Go to Content, and under Default Views, click Seller information.

2. Click + Add entry.

3. Fill in the following fields and click Save & Publish:

   Field	Input
   Business name	My business
   Slug	my-business
   Business logo	Click Add business logo, select the Hygraph logo from your assets, and click the relation icon in the first column to add it
   Business description	This is a description of my business

Your Seller information view should look like this:

Seller information content editor view with entry

#Products

Product entries are created in two steps. In this step, you will create the basic product listing. Related products are added in the next step, once all product entries exist.

1. Go to Content, and under Default Views, click Product.

2. Click + Add entry.

   Add product content entry

3. Create the first entry using the following information:

   Field	Input
   Product name	Black leather shoes
   Product slug	black-leather-shoes
   Product category	Click Add existing Product categories and select Shoes and New arrival
   Product image	Click Add Product images, type black leather shoes in the search filter, and click Add selected images
   Product description	These black leather shoes seamlessly blend sophistication with durability, making them a versatile choice for both formal occasions and everyday wear. The sleek design and high-quality leather ensure a timeless appeal that complements any outfit.
   Product variant	Click Add component, select Shoes, then set Size to Size_40 and Color to Black
   Product price	170

   Product variant is the modular component field built in lesson 4.1. Clicking Add component presents the four product type options — Clothing, Shoes, Accessories, Decor. Selecting Shoes reveals only the shoe size and color fields, not the clothing size fields. This is the modular component working as configured.

4. Click Save & Publish.

Product content entry

Now create the remaining product entries using the following information:

Blue running shoes

Plaid shirt

Necklace

Headband

#Related products

Now that you've created all product entries, you can add related products to each one.

1. Open the Headband entry to edit it.

2. Scroll to the Related Products component and click + Add Related Products.

   The Title field is read-only and displays Related Products. This is because you set the field to read-only with an initial value when building the component in lesson 4.1. So, every instance of this component shows the same heading.

3. Click Add existing products and select: black leather shoes, necklace, blue running shoes, and plaid shirt.

4. Click Add selected products, then click Save & Publish.

Component with related products

Repeat for the remaining product entries:

#Blog post

Create a blog post entry to use on the landing page.

1. Go to Content, and under Default Views, click Blog post.

2. Click + Add entry and fill in the following:

   Field	Input
   Title	Our new leather shoes
   Slug	Auto-completes from the title. Leave as is.
   Body	Type Take a look at this awesome new arrival. Then click Embed, select Block, choose the Product model from the dropdown, click Select model, and select the Black leather shoes entry.

3. Click Save & Publish.

Your blog post entry should look like this:

Blog post complete entry

#Landing pages

You will create two landing pages: a homepage and a Summer Campaign page. The homepage could not have been created earlier because it references seller information, blog posts, and products that needed to exist first.

#Homepage

1. Go to Content, and under Default Views, click Landing page.

2. Click + Add entry and fill in the following:

   Field	Input
   Landing page title	Home
   Link	/
   Blog posts	Leave empty for now
   Product categories	Leave empty for now
   Seller information	Add the seller information entry created earlier
   Stripes	Click + Add component and add a Call to Action and a Product Grid using the information below

   Call to Action:

   Field	Input
   Heading	Main Headline for the page
   Body	We provide amazing products from outerwear, shoes, home goods, and more! Be sure to check out all the amazing products.
   Image	Add the Hygraph Logo asset
   Button	Click + Add Button, enter Shop Now in the Text field and https://google.com in the URL field

   Product Grid:

   Field	Input
   Headline	Picks of the month
   Products	Add relations to: blue running shoes, black leather shoes, necklace, headband, plaid shirt

3. Click Save & Publish.

Your homepage entry should look like this:

#Summer Campaign

1. Go to Content, and under Default Views, click Landing page.

2. Click + Add entry and fill in the following:

   Field	Input
   Landing page title	Summer Campaign
   Link	summer-campaign
   Blog posts	Leave empty for now
   Product categories	Leave empty for now
   Seller information	Add the seller information entry created earlier
   Stripes	Click + Add component and add a Call to Action and a Product Grid using the information below

   Call to Action:

   Field	Input
   Heading	Get ready for summer with these amazing deals
   Body	The Summer Sale is in full swing! See the amazing summer deals we have listed below!
   Image	Leave empty
   Button	Leave empty

   Product Grid:

   Field	Input
   Headline	Summer wear
   Products	Add relations to: blue running shoes, black leather shoes, necklace, headband, plaid shirt

3. Click Save & Publish.

#Navigation

The Navigation model uses the Link component built in lesson 4.1. Each Nav Link entry in the navigation maps to one link in the frontend navigation bar.

1. Go to Content, and under Default Views, click Navigation.

2. Click + Add entry and fill in the following:

   Field	Input
   Nav ID	main

3. Click + Add Link to add the first Nav Link component and fill in:

   Field	Input
   Display Text	Clothes
   Page	Leave empty
   External URL	/category/clothes

4. Click + Add another Link and repeat for each of the following:

   Shoes

   Field	Input
   Display Text	Shoes
   Page	Leave empty
   External URL	/category/shoes

   Accessories

   Field	Input
   Display Text	Accessories
   Page	Leave empty
   External URL	/category/accessories

   Decor

   Field	Input
   Display Text	Decor
   Page	Leave empty
   External URL	/category/decor

   Summer Campaign

   Field	Input
   Display Text	Summer Campaign
   Page	Click Add existing document and select the Summer Campaign landing page
   External URL	Leave empty

5. Click Save & Publish.

The navigation entry now contains all the links the frontend needs. These will be visible when the storefront is connected in lesson 8.

#What's next

Lesson 6.2 - Localize content

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