# 6.1 Create content

Create product categories, seller information, products, landing pages, and navigation entries in the Hygraph content editor.

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.

[Video: Add alt text and caption to assets](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/9E8rOBuAQFujFeJbLMx3)

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.

**Additional practice:**
For alt text and caption data for all remaining assets, see [Create content — additional practice](https://hygraph.com/docs/getting-started/tutorial/tutorial-create-content-additional-practice#assets). Adding this data is optional and does not affect the frontend connection.

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

| Category name | Slug | Description |
|---|---|---|
| Shoes | shoes | You will find shoes here |
| Sportswear | sportswear | You will find sportswear here |
| Urban | urban | You will find urban-style items here |
| New arrival | new-arrival | You will find our latest arrivals here |
| Decor | decor | You will find decor items here |
| Accessories | accessories | You will find accessories here |

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](https://hygraph.com/images/docs/getting-started/product-category-table-full.png)

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

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

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

Now create the remaining product entries using the following information:

**Blue running shoes**

| Field | Input |
|---|---|
| Product name | Blue running shoes |
| Product slug | blue-running-shoes |
| Product category | Select **Sportswear** and **Shoes** |
| Product image | Select images with file name **blue running shoes** |
| Product description | These blue running shoes offer both form and function, providing exceptional support and style for your active pursuits. The breathable material and cushioned sole ensure a comfortable experience mile after mile. |
| Product variant | Select **Shoes**, then Size `Size_42` and Color `Blue` |
| Product price | 130 |

**Plaid shirt**

| Field | Input |
|---|---|
| Product name | Plaid shirt |
| Product slug | plaid-shirt |
| Product category | Select **New arrival**, **Urban**, and **Clothes** |
| Product image | Select images with file name **blue plaid shirt** |
| Product description | This plaid shirt exudes a timeless charm, perfect for a casual day out or a relaxed evening gathering. The classic checkered pattern and comfortable fit make it a wardrobe staple for effortless style. |
| Product variant | Select **Clothing**, then Size `XL` and Color `Blue` |
| Product price | 60 |

**Necklace**

| Field | Input |
|---|---|
| Product name | Necklace |
| Product slug | necklace |
| Product category | Select **Accessories** |
| Product image | Select images with file name **necklace** |
| Product description | This white necklace is crafted from parts of seashells, evoking a relaxed, beachy vibe. Perfect for those looking to add a touch of the sea to their daily style. |
| Product variant | Select **Accessories**, then Color `White` |
| Product price | 12 |

**Headband**

| Field | Input |
|---|---|
| Product name | Headband |
| Product slug | headband |
| Product category | Select **Accessories** |
| Product image | Select images with file name **headband** |
| Product description | This white cotton headband provides an elegant and sophisticated touch to your hairstyle. Perfect for completing your look with a blend of fashion and comfort. |
| Product variant | Select **Accessories**, then Color `White` |
| Product price | 9 |

**Additional practice:**
For adding more product entries, see [Create content — additional practice](https://hygraph.com/docs/getting-started/tutorial/tutorial-create-content-additional-practice#products). Adding these is optional but some API Playground query exercises in lesson 7.1 reference them.

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

Repeat for the remaining product entries:

| Product entry | Related products |
|---|---|
| Blue running shoes | black leather shoes, necklace, headband, plaid shirt |
| Black leather shoes | blue running shoes, necklace, headband, plaid shirt |
| Necklace | black leather shoes, blue running shoes, headband, plaid shirt |
| Plaid shirt | black leather shoes, necklace, headband, blue running shoes |

**Additional practice:**
For related product assignments for the additional practice entries, see [Create content — additional practice](https://hygraph.com/docs/getting-started/tutorial/tutorial-create-content-additional-practice#related-products).

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

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

[Video: Homepage complete entry](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmnn9whlfhtqa07vx00gskfs7)

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

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