#Full Tutorial - Build Your First eCommerce Project
This tutorial takes you through a complete Hygraph project: an e-commerce store selling wearables and home goods. By the end, you will have a working schema, real content, a queryable API, and a connected Next.js storefront.
Getting started project preview
Every decision in this tutorial is one you will face on a real project. The schema choices you make in lessons 1 through 5 determine what you can query in lesson 7 and what your frontend renders in lesson 8.
#Choose your path
Your starting point is a cloned Hygraph project. You can choose your own path through the tutorial.
Option 1: Build from scratch
This clone includes navigation structure and image assets. You will build the schema, content, API configuration, and frontend connection yourself, step by step.
Choose this path if you want to understand how every part of a Hygraph project is constructed and why.
Requirements
- Hygraph account
- Basic GraphQL knowledge
- Basic understanding of content modeling
- Code editor, such as VS Code
- Current version of Node.js
- Netlify or Vercel account (required for lessons 8 and 9)
- Growth plan or higher, or a 30-day trial, for lessons 5.1 through 5.3
Option 2: Explore a complete project
This clone includes the complete Hygraph project: all models, components, enumerations, content entries, and localized content already built. You will skip straight to querying and frontend connection.
Choose this path if you want to practice API queries, mutations, and frontend integration without building the schema yourself.
Requirements
- Hygraph account
- Basic GraphQL knowledge
- Basic understanding of content modeling
- Growth plan or higher, or a 30-day trial, for remote sources
#Clone the project
The cloning process is the same for both options.
Clone project screen
The project already has a name, but you can give it a new name. You can also optionally add a description, select a region, and click Clone now. Cloning takes a couple of minutes. When it finishes, you land on your project homepage.
#What's already in your project
This section is for Option 2 readers only. If you chose Option 1, move on to the lesson overview below.
Your cloned project is fully built. Here is what it contains.
Schema
| Type | What's included |
|---|---|
| Models | Product, Product category, Blog post, Seller information, Landing page, Navigation |
| Components | Related Products, Product variant, Clothing, Shoes, Accessories, Decor, Button, Call to Action, Product Grid, Link |
| Enumerations | Clothes size, Shoes size, Wearable items color, Decor items color |
| Remote source | HyDemoAPI, a Hygraph-maintained REST API used to fetch product reviews |
| Remote fields | Reviews field on the Product model; Reviews top-level field on the Query model |
Content
| Type | What's included |
|---|---|
| Products | 9 published entries with images, variants, related products, and category assignments |
| Product categories | 7 published entries |
| Landing pages | Homepage and Summer Campaign, both with localized Spanish content |
| Navigation | Main navigation with category and campaign links |
| Seller information | 1 published entry |
| Assets | All product images with alt text and captions |
Your project does not include API tokens, environment variable configuration, a connected frontend, or webhooks. You will set those up in lessons 8 and 9.
Your path through the tutorial
- Query your content in the API Playground.
- Run mutations.
- Set up the Next.js frontend starter.
- Connect Hygraph to your local frontend.
- Configure a preview URL for draft content.
- Set up a webhook to trigger frontend deploys on publish.
#Lesson overview
The full lesson sequence is below. Option 2 readers start at lesson 7.1.
#Lesson 1 — Content models
| # | Lesson | What you will be able to do |
|---|---|---|
| 1.1 | Design your content models | Sketch your model structure and understand how fields, models, and schema relate to each other |
| 1.2 | Build your content models | Create your base models and fields in the Hygraph schema editor |
#Lesson 2 — References
| # | Lesson | What you will be able to do |
|---|---|---|
| 2.1 | Configure reference fields | Connect models to each other using one-to-one, one-to-many, and many-to-many references |
#Lesson 3 — Enumerations
| # | Lesson | What you will be able to do |
|---|---|---|
| 3.1 | Configure enumerations | Create predefined value sets that appear as dropdowns in the content editor |
#Lesson 4 — Components
| # | Lesson | What you will be able to do |
|---|---|---|
| 4.1 | Build components | Create reusable field sets for product variants, CTAs, related products, and navigation links |
| 4.2 | Add components to your models | Attach your components to models as basic and modular component fields |
#Lesson 5 — Remote Sources
| # | Lesson | What you will be able to do |
|---|---|---|
| 5.1 | Add a Remote Source | Connect an external REST API to your Hygraph schema |
| 5.2 | Remote Fields | Fetch remote data within the context of a specific model entry |
| 5.3 | Top-level Remote Fields | Fetch remote data outside the context of any model and serve it alongside Hygraph content in a single API call |
#Lesson 6 — The Content Editor
| # | Lesson | What you will be able to do |
|---|---|---|
| 6.1 | Create content | Create and publish products, categories, landing pages, and navigation entries |
| 6.2 | Localize content | Add a locale and write localized content for selected fields |
| 6.3 | Understand content stages | Learn how DRAFT and PUBLISHED content stages affect what the Content API returns and what the frontend displays |
#Lesson 7 — The API Playground
| # | Lesson | What you will be able to do |
|---|---|---|
| 7.1 | Exercises: Queries | Write queries for models, references, components, and remote fields |
| 7.2 | Exercises: Mutations | Create, update, publish, and delete content entries programmatically |
#Lesson 8 — Frontend Connection
| # | Lesson | What you will be able to do |
|---|---|---|
| 8.1 | Set up the frontend starter | Clone and configure the Next.js e-commerce starter locally |
| 8.2 | Connect your storefront | Configure API access permissions, create a PAT, and connect Hygraph to your local frontend |
| 8.3 | Preview URL | Add a preview button to the content editor sidebar to preview draft content before publishing |
#Lesson 9 — Webhooks
| # | Lesson | What you will be able to do |
|---|---|---|
| 9.1 | Configure webhooks | Set up a webhook that triggers a frontend rebuild whenever content is published |