---
title: Creating the Products page
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

This page describes how to add the product list page and publish computer specifications on the website.

## Creating the product list page

1. Open the **Pages** application.
2. Select the root document (**My website**).
3. Click **New** ().
4. Choose the **Page (menu item)** document type.
5. Type _**Products**_ as the **Page name** and choose the **Create a blank page** option.
6. Click **Save** to create the page.
7. Switch to the **Design** tab and add the **Breadcrumbs** web part into **zoneA**. Leave the default properties for the web part and click **OK**.
8. Add the **Datalist** web part below the breadcrumbs. Set the following properties for the web part:

   | Property                     | Value                   | Description                                                                                                                                                                                    |
   | ---------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
   | Document types               | custom.computer         | Configures the datalist to display only documents of the custom.computer type (created in the Defining a new document type topic).                                                             |
   | ORDER BY expression          | ComputerName ASC        | Sets the SQL ORDER BY clause that the web part uses when loading data. As a result, the datalist displays items in ascending alphabetical order based on the values of the ComputerName field. |
   | Transformation               | custom.computer.preview | Assigns the transformation that the datalist uses to display the list of computer products.                                                                                                    |
   | Selected item transformation | custom.computer.default | When a user selects a specific computer document on the website, the web part displays the details according to the specified transformation.                                                  |
9. Click **OK**.

The page is now ready to display underlying computer documents.

## Adding computer documents

Now add documents representing individual computer products:

1. In the **Pages** application, select the **Products** page in the content tree.
2. Click **New** () and choose the **Computer** document type.

   - **Computer name**: Home PC Dallas
   - **Processor type**: Athlon
   - **RAM (MB)**: 2048
   - **HDD (GB)**: 160
   - **Image**: upload an image (you can find images in the sample web template - **SampleWebTemplate\Computer\_Images**)
   - **Publish from/Publish to**: leave the values blank
3. Click **Save and create another** and enter the following values:
   - **Computer name**: Office PC Houston
   - **Processor type**: Pentium Core 2 Duo
   - **RAM (MB)**: 4096
   - **HDD (GB)**: 200
   - **Image**: upload an image (you can find images in the sample web template) - **SampleWebTemplate\Computer\_Images**)
   - **Publish from/Publish to**: leave the values blank
4. Click **Save**.

You can edit the field values of the computer documents at any time by switching to the **Form** tab in the **Pages** application.

![Editing document fields on the Form tab](https://docs.kentico.com/docsassets/k8tutorial/creating-the-products-page/Computer_Form.png "Editing document fields on the Form tab")

If you view the /Products page in **Preview** mode, you can see a list of the two computer products (formatted according to the **custom.computer.preview** transformation).

![Previewing the list of products](https://docs.kentico.com/docsassets/k8tutorial/creating-the-products-page/Products_List.png "Previewing the list of products")

When you click the title of a specific computer, the page displays the detail view (using the **custom.computer.default** transformation).

![Previewing the details of a selected product](https://docs.kentico.com/docsassets/k8tutorial/creating-the-products-page/Products_Detail.png "Previewing the details of a selected product")