Product page for eCommerce

#Overview

Product Page model

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:

Product Page mock image

#Prerequisites

• REQUIRED: You need to have a Hygraph account. If you don't have one, you can sign up here.
• REQUIRED: You need to have a Hygraph project. Look into the following section to learn more about your options.

#What you can do

Use this guide to create a Product Page model. You have two options:

• OPTION 1: 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.

#Not in the mood to start building?

Clone the entire 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

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.

Enumerations list

#Clothing size enumeration

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:

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:

Finally, click Add enumeration to save.

#Shoes size enumeration

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:

You'll add the following values to that enumeration:

Click Add enumeration to save.

#Item color enumeration

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:

You'll add the following values to that enumeration:

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.

Components list

#Clothing component

Clothing component

In the Schema builder, click +Add next to Components and use the following information:

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:

Click Add to save.

You'll now repeat the process to add the next enumeration field, using the following information:

Click Add to save.

#Shoes component

Shoes component

The next component you should create is the shoes component. Click +Add next to Components and use the following information:

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:

Click Add to save.

You'll now repeat the process to add the next enumeration field, using the following information:

Click Add to save.

#Product variant component

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.

First, you'll create the component using the following information:

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:

#3. Create the model

Product Page 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:

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:

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:

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:

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:

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:

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:

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:

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!

#Resulting content form

If you followed this tutorial, your resulting content form should look like this:

Content form

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: Learn more about components, available component field types, and how to use them.
• Enumerations: Learn more about enumerations and how to configure them.
• References: Learn more about the different reference field types and how to configure them.