# Product page for eCommerce
This guide shows how to build a Product page for eCommerce with product information stored in the CMS
## Overview
**Do you have suggestions?:**
Join our community to suggest new recipe ideas!
This guide shows how to create a Product model for eCommerce with Product information stored in the CMS.
Whether you decide to use an external PIM as the source of truth for your product information and copy/paste the information in Hygraph or create and store all of your product information in the CMS only, this recipe shows an efficient way to combine schema elements to create a product page that contains basic product information and uses components for product variants and related product listings.
This mock image shows what a frontend using this setup could look like:
## Prerequisites
- `REQUIRED:` You need to have a Hygraph account. If you don't have one, [**you can sign up here.**](https://app.hygraph.com/signup)
- `REQUIRED:` You need to have a Hygraph project. [Look into the following section to learn more about your options.](https://hygraph.com/classic-docs/recipes/product-page/product-page-ecommerce#what-you-can-do)
### What you can do
Use this guide to create a **Product Page** model. You have two options:
- `OPTION 1:` [**Create a project.**](https://hygraph.com/classic-docs/getting-started/fundamentals/quickstart#create-a-project) This is the way to go if you want to follow the entire tutorial for learning purposes.
- `OPTION 2:` **Use an existing project of yours.** This is the way to go if you already have a project and want to add this model. In this case, you may need to adjust parts of the tutorial to your own project schema.
**Note:**
- Take [**plan limits**](https://hygraph.com/pricing) into consideration when adding a recipe to your own project.
- Are you new to Hygraph? You may want to check out our [**Getting Started Tutorial!**](https://hygraph.com/classic-docs/getting-started/onboarding-overview)
#### Not in the mood to start building?
[**Clone the entire cookbook**](https://hygraph.com/classic-docs/recipes/product-page/section-index#product-pages-cookbook)
This is the way to go if you're curious about how we built the Product Pages but don't want to follow the step-by-step creation process. This project contains the entire **Product Page Cookbook** so you can compare recipes or look into what instances they contain.
## Core concepts
In this guide, you'll work with different schema elements to create a **Product Page model**. Let's look into them:
- **Model:** Your schema is the content structure of your project. You can define your schema by creating models, adding fields, reusable components, and sidebar widgets, integrating remote sources, and establishing relationships with other models.
- **Component**: a predefined set of fields that can be reused across models and content entries. You can think of a component as a flexible, reusable template: you define the fields that will be used inside a component once and then fill them with different content every time you use it in a content entry.
- **Modular component field**: a modular component field can have two or more components attached.
- **Basic component field**: a component is a special field type in your Hygraph schema that defines which components of which type can be used in a model. Component fields can be of basic or modular types. A **basic component field** can only have one component attached to it. You can limit the number of component instances to one or allow multiple component instances to be added to the content entry.
- **Nested components:** functionality that allows you to create components within a component as if you had a parent component containing one or more child components.
- **Enumerations:** an enumeration is a predefined set of values representing a list of possible options. You can use them to group values within a type.
- **References:** References are relations between two or more content entries in your project. With references, you can reuse content entries by connecting them. Once the relation is configured, you can also create related content directly from the content form.
## Step-by-step guide
[Video](https://www.youtube.com/watch?v=w8uYkYj54hc)
This video follows the same step-by-step tutorial offered in this document.
### 1. Create the enumerations
Our Product Page model will contain component fields containing enumeration fields for color and size. Since it's best to start building from the bottom up, we'll start with the enumerations.
#### Clothing size enumeration
Navigate to the **Schema builder** of your Hygraph project, and click `+Add` next to **Enumerations** on the left sidebar. We'll use the following information to create the first one:
| Field | Input |
| ------------ | ------------- |
| Display name | Clothing size |
| API ID | ClothingSize |
The next step is to add enumeration values, which are the options you will get when using this later as a dropdown menu.
For every enumeration value, you need to enter a `Display name`, an `API ID`, and click `Add`.
We'll add the following values:
| Display name | API ID |
| ------------ | ------ |
| L | l |
| M | m |
| S | s |
| XL | xl |
| XS | xs |
Finally, click `Add enumeration` to save.
#### Shoes size enumeration
You'll repeat the process to create an enumeration for shoes size.
You'll use the following information to create the enumeration:
| Field | Input |
| ------------ | ---------- |
| Display name | Shoes size |
| API ID | ShoesSize |
You'll add the following values to that enumeration:
| Display name | API ID |
| ------------ | ------ |
| Size 35 | size35 |
| Size 36 | size36 |
| Size 37 | size37 |
| Size 38 | size38 |
| Size 39 | size39 |
| Size 40 | size40 |
| Size 41 | size41 |
Click `Add enumeration` to save.
#### Item color enumeration
Finally, we'll create one last enumeration to hold the list of item colors. Use the following information to create the enumeration:
| Field | Input |
| ------------ | ---------- |
| Display name | Item color |
| API ID | ItemColor |
You'll add the following values to that enumeration:
| Display name | API ID |
| ------------ | ------ |
| Black | black |
| Blue | blue |
| Green | green |
| Red | red |
| White | white |
| Pink | pink |
Click `Add enumeration` to save.
Now that you have created the 3 enumerations that you need to add to your components, it's time to create those components.
### 2. Create the components
In this section you'll create components for clothes and shoes, that you will later nest into a product variant component. This will allow you to simply add a product variant to the product model and let editors decide what product to add information about in the content form by selecting a product type.
#### Clothing component
In the **Schema builder**, click `+Add` next to **Components** and use the following information:
| Field | Input |
| ------------- | ------------------ |
| Display name | Clothing component |
| API ID | ClothingComponent |
| API ID Plural | ClothingComponents |
Click `Add component` to save.
Now that you've created the component itself, it's time to add fields to it. You'll add two of the enumerations that you created in the previous step of this guide.
Find the `Enumeration` field on the right sidebar, click `Add`, and use the following information to create the enumeration:
| Tab | Field | Input |
| ----------- | --------------------- | ------------------------------------------------ |
| Settings | Display name | Size |
| Settings | API ID | size |
| Settings | Enumeration | Use the dropdown menu to select `Clothing size`. |
| Settings | Description | Select a size for the clothing item |
| Validations | `Make field required` | Select this checkbox |
Click `Add` to save.
You'll now repeat the process to add the next enumeration field, using the following information:
| Tab | Field | Input |
| ----------- | --------------------- | --------------------------------------------- |
| Settings | Display name | Color |
| Settings | API ID | color |
| Settings | Enumeration | Use the dropdown menu to select `Item color`. |
| Settings | Description | Select a color for the clothing item |
| Validations | `Make field required` | Select this checkbox |
Click `Add` to save.
#### Shoes component
The next component you should create is the shoes component. Click `+Add` next to **Components** and use the following information:
| Field | Input |
| ------------- | --------------- |
| Display name | Shoes component |
| API ID | ShoesComponent |
| API ID Plural | ShoesComponents |
Click `Add component` to save.
Just like with the previous component, you'll add enumerations for size & color to this one.
Find the `Enumeration` field on the right sidebar, click `Add`, and use the following information to create the enumeration:
| Tab | Field | Input |
| ----------- | --------------------- | --------------------------------------------- |
| Settings | Display name | Size |
| Settings | API ID | size |
| Settings | Enumeration | Use the dropdown menu to select `Shoes size`. |
| Settings | Description | Select a shoe size |
| Validations | `Make field required` | Select this checkbox |
Click `Add` to save.
You'll now repeat the process to add the next enumeration field, using the following information:
| Tab | Field | Input |
| ----------- | --------------------- | --------------------------------------------- |
| Settings | Display name | Color |
| Settings | API ID | color |
| Settings | Enumeration | Use the dropdown menu to select `Item color`. |
| Settings | Description | Select an item color |
| Validations | `Make field required` | Select this checkbox |
Click `Add` to save.
#### Product variant component
By now, you've created two components, each containing enumerations that will allow editors to select a color & size for the items. For the **Product variant component** we'll use a modular component field that will offer the option to select the clothing or shoes components in the content form. This makes the content form more dynamic and avoids having fields in it that the editors won't use.
**Pro Tip:**
Shorter content forms are easier for editors to work with. Make sure to always think about your editors and their workflow when building a schema.
First, you'll create the component using the following information:
| Field | Input |
| ------------- | --------------- |
| Display name | Product variant |
| API ID | ProductVariant |
| API ID Plural | ProductVariants |
Click `Add component` to save.
This component will only contain a `Modular component` field. Find it on the right sidebar and click `Add`.
Use the following information:
| Tab | Field | Input |
| -------- | --------------------------- | --------------------------------------------------------------------------- |
| Settings | Display name | Product type |
| Settings | API ID | productType |
| Settings | Description | Select the product type to reveal fields |
| Settings | `Select allowed components` | Use the dropdown menu to select `Clothing component` and `Shoes component`. |
**Pro Tip:**
In this case, we don't allow multiple values because the idea is to use this component to add only one product to a product listing.
### 3. Create the model
Now it's time to create the **Product Page** model. Keep in mind that this model contemplates information being stored in the CMS, so we'll include all the information needed to create a product listing. This does not necessarily mean this information exists *only* in the CMS, as it could be copy-pasted from an external source that a company uses to store their product information.
You'll create the model first. In the **Schema builder**, click `+Add` next to `Models`, and use the following information:
| Field | Input |
| ------------- | ---------------------- |
| Display name | Product Page eCommerce |
| API ID | ProductPageECommerce |
| API ID Plural | ProductPagesECommerce |
Click `Add Model` to save.
Product listings in an eCommerce normally show the name, a description, at least one image, and the price. In addition to this, the model will have a product slug, in case the frontend needs this to build a custom URL, the product variant component that you built earlier, and the ability to link related products using a reference field.
You'll start with the product name. Add a `Single line text` field from the right sidebar, and use the following information:
| Tab | Field | Input |
| ----------- | --------------------- | ---------------------------------- |
| Settings | Display name | Product name |
| Settings | API ID | productName |
| Settings | Description | Write the name of the product here |
| Settings | `Use as title field` | Leave this checkbox selected |
| Validations | `Make field required` | Select this checkbox |
| Validations | `Set field as unique` | Select this checkbox |
Click `Add` to save.
This configuration prevents editors from creating products without a name, as well as giving the same name to more than one product.
Next, for the product slug, add a `Slug` field from the right sidebar, and use the following information:
| Tab | Field | Input |
| ----------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Settings | Display name | Product slug |
| Settings | API ID | productSlug |
| Settings | `Lowercase` | Leave this checkbox selected |
| Validations | `Set field as unique` | Leave this checkbox selected |
| Validations | `Match a specific pattern` | Leave this checkbox selected, and then select `Slug` from the dropdown. You don't need to modify the pattern. Under `Custom error message`, write “Input value does not match the expected format.” |
Click `Add` to save.
Next, you want editors to be able to include at least one image in the content form. Add an `Asset picker` field from the right sidebar, using the following information:
| Tab | Field | Input |
| -------- | ----------------------- | ------------------------------------------- |
| Settings | Display name | Product image |
| Settings | API ID | productImage |
| Settings | Description | Add one or more images for the product here |
| Settings | `Allow multiple assets` | Select this checkbox |
Click `Add` to save.
Next, you want the product to have a description by including a rich text field, which will also allow some formatting. Add a `Rich text` field from the right sidebar, using the following information:
| Tab | Field | Input |
| -------- | ------------------ | --------------------------------------------------------------------------------------- |
| Settings | Display name | Product description |
| Settings | API ID | productDescription |
| Settings | Description | Add a product description here |
| Settings | `Enable embedding` | Select this checkbox and use the dropdown to select the `Product Page eCommerce` model. |
Click `Add` to save.
It's time to add the **Product variant** component that you built earlier. Add a `Basic component` field from the right sidebar, using the following information:
| Tab | Field | Input |
| -------- | ------------------ | --------------------------------------------- |
| Settings | Display name | Product variant |
| Settings | API ID | productVariant |
| Settings | Description | Select a product type |
| Settings | Select a component | Use the dropdown to select `Product variant`. |
Click `Add` to save.
We now need to include a field for the price of the product. Add a `Float` field from the right sidebar, using the following information:
| Tab | Field | Input |
| -------- | ------------ | -------------------------- |
| Settings | Display name | Product price |
| Settings | API ID | productPrice |
| Settings | Description | Add the product price here |
Click `Add` to save.
This product listing needs one more thing: The ability to add related products.
You can do this by creating a reference field that will allow editors to add content entries from this very model.
Add a `Reference` field from the right sidebar, using the following information:
| Tab | Field | Input |
| --------- | ------------------------------------------------------------------ | --------------------------------------------------- |
| Define | `Allow only one model to be referenced` | Select this radio button. |
| Define | Model to reference | use the dropdown to select `Product Page eCommerce` |
| Define | Reference direction | Use the radio button to select `One-way reference` |
| Define | Relation cardinality | One to many |
| Define | `Allow multiple Product Page eCommerce per Product Page eCommerce` | Select this checkbox |
| Configure | Display name | Related products |
| Configure | API ID | relatedProducts |
| Configure | Description | Add related products here |
Click `Add` to save.
This reference configuration will allow editors to add links to multiple content entries, but only from the `Product Page eCommerce` model.
Your model is ready!
**Pro Tip:**
There is no one-size-fits-all for all possible product model configurations, so when you create your own product page model, remember to give some serious thought to what you'll be selling.
Study what information a potential buyer would need to buy the product, as well as what information a developer would need to create a frontend for you product listings.
## Resulting content form
If you followed this tutorial, your resulting content form should look like this:
[Video: Content form](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmnn9x9wyhu6e07vxzm3yqthd)
Editors will be able to create new product entries, using a dynamic content form that allows them to load the fields for the required product type only.
## Useful links
- [Components documentation:](https://hygraph.com/classic-docs/developer-guides/schema/components) Learn more about components, available component field types, and how to use them.
- [Enumerations:](https://hygraph.com/classic-docs/developer-guides/schema/using-enumerations) Learn more about enumerations and how to configure them.
- [References:](https://hygraph.com/classic-docs/developer-guides/schema/references) Learn more about the different reference field types and how to configure them.
**Do you have suggestions?:**
Join our community to suggest new recipe ideas!