#1.1 Design your content models
In this lesson, you will map the content structure the project requires before building anything in the schema editor. This lesson has no steps to complete in Hygraph. The decisions made here determine every field, reference, and component configured in the lessons that follow.
Read Content modeling in Hygraph to understand the underlying concepts first.
#The project
The e-commerce project sells wearables and home goods. Before opening the schema editor, you need to map the content structure against what the store must do.
Content modeling
The store has four goals:
- Display product listings with enough detail for a buyer to make a decision: image, size, color, price, description, and reviews.
- Organize products into categories, where one product can belong to multiple categories and one category can contain multiple products.
- Display related products on each product page to encourage further exploration.
- Support a landing page, a blog, seller information, and a navigation structure.
Reviews come from an external source. You will not store them in Hygraph. Instead, you will fetch them from a remote API using Content Federation.
#Proposed content flow
Based on those goals, here is what the schema will contain.
Project structure
Models
| Model | Purpose |
|---|---|
Product | Product listings with name, slug, images, description, price, and variant |
Product category | Categories that products can be assigned to |
Blog post | Articles promoting products |
Seller information | Business details referenced from the landing page |
Landing page | Flexible pages built from component sections |
Navigation | Site navigation built from Link components |
Components
| Component | Purpose |
|---|---|
| Product Variant | Modular component for product type selection (Clothing, Shoes, Accessories, or Decor) |
| Clothing | Size and color fields for clothing items |
| Shoes | Size and color fields for footwear |
| Accessories | Color field for accessories |
| Decor | Color field for decor items |
| Related products | A set of product references for related product sections |
| Call to Action | Heading, body, image, and button for CTA sections |
| Button | Text and URL for use inside CTA components |
| Product Grid | Headline, description, and product references for grid sections |
| Link | Display text, URL, and page reference for navigation links |
Product Variant as a modular component, not separate models. The store sells clothing, shoes, accessories, and decor. Each product type requires different fields. Shoes need a shoe size, clothing needs a clothing size, accessories need neither. Rather than creating four separate product models, the schema uses a single Product model with a modular component field. The component presents only the relevant fields based on the product type selected in the content editor.
Enumerations
| Enumeration | Values |
|---|---|
| Clothes size | XS, S, M, L, XL |
| Shoes size | Size_35 through Size_44 |
| Wearable items color | Red, Green, Blue, Black, White |
| Decor items color | Gold, Silver, Bronze, Cobalt |
Remote source
| Source | Purpose |
|---|---|
| HyDemoAPI | Fetches product reviews from an external REST API. Configured as a Remote Field on the Product model and a Top-level Remote Field on the Query model. |
Reviews as a remote field, not a model. Reviews exist in a third-party system. Migrating them into Hygraph would duplicate data and create a synchronization problem. A remote source connects to the origin directly. Review data appears in the API response alongside Hygraph content, with no migration required.
#What's next
Lesson 1.2 - Build your content modelsOr, go to the Tutorial overview for the full lesson list.