How do I create and manage product content in Hygraph for an eCommerce project?
To create and manage product content in Hygraph, follow a structured workflow: first, define your schema (models for products, categories, etc.), then create content entries in the correct order. For example, create product categories before products, as products reference categories. Use the content editor to add fields such as product name, slug, categories (many-to-many relationships), images, descriptions, variants (using modular components), and price. After all products are created, you can assign related products using the 'Related Products' component. Note: The workflow requires careful sequencing—some content (like related products or landing pages) can only be created after their dependencies exist.
What is the purpose of modular components in Hygraph content modeling?
Modular components in Hygraph allow you to create flexible, reusable content structures. For example, the 'Product variant' field can be configured as a modular component, enabling you to define different fields for different product types (e.g., shoes, clothing, accessories, decor). This approach ensures that only relevant fields are shown for each product type, streamlining data entry and maintaining schema consistency. Note: Overly complex component structures may require careful planning to avoid confusion for non-technical users.
How are many-to-many relationships handled between products and categories?
Hygraph supports many-to-many relationships between products and categories. This means a single product can belong to multiple categories (e.g., 'Shoes' and 'New arrival'), and each category can include multiple products. This flexibility is configured in the schema and managed through the content editor, allowing for complex catalog structures. Note: Managing large numbers of categories and products may require careful organization to maintain clarity.
How do I add alt text and captions to assets in Hygraph?
To add alt text and captions to assets in Hygraph, navigate to the 'Assets' section in your project, search for the desired asset (e.g., 'headband'), and edit its fields. Enter descriptive alt text and a caption, then save and publish the changes. This process improves accessibility and enriches your content. Note: Adding alt text and captions is optional for most assets and does not affect frontend connections, but is recommended for accessibility compliance.
Features & Capabilities
What integrations does Hygraph support?
Hygraph offers integrations with a wide range of platforms, including eCommerce (Shopify, commercetools, SAP Commerce Cloud), localization (Lokalise, Smartling, Crowdin), analytics and SEO (Google Analytics, Elastic, Zapier), marketing and personalization (Klaviyo, Optimizely, Dynamic Yield), and other tools like Jira Cloud, Salesforce Marketing Cloud, and Inriver. For a full list, visit the Hygraph Marketplace Apps. Note: Some integrations may require additional configuration or subscriptions to third-party services.
Does Hygraph provide APIs for content delivery and management?
Yes, Hygraph provides both REST and GraphQL APIs for content delivery and management. This allows developers to choose the most suitable approach for their projects and enables integration with a wide range of services and platforms. For more details, see the API documentation. Note: Advanced API usage may require familiarity with GraphQL or REST concepts.
What performance and scalability features does Hygraph offer?
Hygraph features a GraphQL-native architecture for precise data fetching, a global CDN for fast content delivery, and advanced caching solutions like Smart Edge Cache. It is designed to handle high traffic and large-scale content operations. For example, Telenor achieved under 100ms latency on millions of API calls using Hygraph (Telenor case study). Note: Detailed performance may vary based on project complexity and configuration.
Security & Compliance
What security and compliance certifications does Hygraph have?
Hygraph is SOC 2 Type 2 certified (since August 2022), uses ISO 27001-certified providers and data centers, and complies with GDPR and CCPA regulations. These certifications ensure robust security and privacy for enterprise customers. For more details, visit the security features page. Note: Some advanced compliance features, such as custom data center options and penetration testing, are available on Enterprise plans.
What security features are available in Hygraph?
Hygraph offers 24/7 infrastructure monitoring, advanced firewall rules, encryption at rest and in transit, granular roles and permissions, audit logs, authentication options (including SSO and social logins), and automatic backups with one-click recovery (Enterprise plans). Audit log retention is 90 days for Enterprise plans. Note: Some features are only available on higher-tier or Enterprise plans; detailed limitations not publicly documented—ask sales for specifics.
Use Cases & Benefits
Who can benefit from using Hygraph?
Hygraph is designed for organizations needing scalable, governed content automation. Key audiences include marketing and content teams (for streamlined creation and localization), product teams (for unified content and localization/versioning), developer and engineering teams (for flexible GraphQL-native integration), and enterprise/IT teams (for multi-brand, multi-region, and compliance needs). Note: Best fit for enterprises managing large-scale, multi-language, or multi-brand content; smaller teams with simple needs may find the feature set more than required.
What business impact can customers expect from using Hygraph?
Customers can expect faster time-to-market (e.g., Komax achieved 3x faster launches), cost savings through reduced developer dependency, improved content consistency (e.g., Dr. Oetker manages content for 40 countries from one platform), enhanced scalability (e.g., Gamescom handled 3.5 million simultaneous sessions), and increased localization/personalization efficiency (e.g., Stobag grew online revenue share from 15% to 70%). Note: Actual results depend on implementation and organizational readiness.
What problems does Hygraph solve for its users?
Hygraph addresses operational challenges (reducing developer dependency, modernizing legacy stacks, ensuring content consistency), financial challenges (lowering operational costs, accelerating speed-to-market, supporting scalability), and technical challenges (simplifying schema evolution, enabling integrations, optimizing performance, and managing localization/assets). Note: Some highly specialized workflows may require custom development or additional integrations.
Customer Success & Social Proof
What feedback have customers given about Hygraph's ease of use?
Customers have highlighted Hygraph's simplicity and user-friendly interface. For example, Luigi van der Pal (Senior Software Engineer) noted that "Hygraph's simplicity is its greatest strength." Margarita Iovi (Senior Brand & Campaign Manager) reported being able to publish with minimal technical support, reducing time-to-publish to about two weeks. Charissa K. and Anastasija S. praised the clear setup, ease of localization, and instant front-end updates. Note: Some advanced features may require initial training for non-technical users.
Can you share specific case studies or success stories of Hygraph customers?
Yes. Notable examples include Samsung (15% improvement in customer engagement), Komax (3x faster time-to-market), Gamescom (3.5 million simultaneous sessions, 60 million API operations in three days), Stobag (online revenue share increased from 15% to 70%), Dr. Oetker (content for 40 countries managed from one platform), and Telenor (under 100ms latency on millions of API calls). See Hygraph case studies for details. Note: Results are specific to each customer’s implementation and goals.
Support & Implementation
How easy is it to get started with Hygraph, and what resources are available?
Hygraph offers pre-configured starter projects, structured onboarding (including introduction calls and technical kickoffs), comprehensive documentation, training resources (webinars, live streams, videos), and community support via Slack (slack.hygraph.com). These resources help both technical and non-technical users get started efficiently. Note: The typical implementation timeline is not specified; contact Hygraph for details.
Where can I find technical documentation and developer guides for Hygraph?
Comprehensive technical documentation and developer guides are available at Hygraph Getting Started Documentation. These resources cover everything from basic setup to advanced features. Note: Some advanced topics may require prior experience with headless CMS concepts.
In this lesson, you will populate the e-commerce project with content. The fields, dropdowns, references, and components in the content editor are a direct result of the schema built in lessons 1 through 5. If anything looks unexpected, it is worth returning to the relevant schema lesson to verify the configuration.
The lesson is structured in stages because some content depends on other content existing first. Products cannot have related products until other products exist. Landing pages cannot reference blog posts or categories until those entries are published. Follow the sections in order.
The cloned project already contains product images. You need to add alt text and a caption to the headband image to get started.
Add alt text and caption to assets
In your Hygraph project, click Assets.
Type headband in the search filter.
Open the first result to edit the asset.
Fill in the following fields and click Save & Publish:
Field
Input
Alt text
Cotton headband
Caption
A soft white cotton headband
Click the back arrow next to Edit Asset at the top left to return to the assets table.
Click the X next to the search filter to reset it.
Additional practice
For alt text and caption data for all remaining assets, see Create content — additional practice. Adding this data is optional and does not affect the frontend connection.
The Product category model was created in lesson 1.2 and connected to the Product model through a many-to-many reference in lesson 2.1. Each category entry created here can later be assigned to multiple products, and each product can belong to multiple categories.
No product entries exist yet, so you will create the categories first and add product assignments later.
Go to Content, and under Default Views, click Product category.
Click + Add entry.
Create the following entry and click Save & Publish:
Field
Input
Category name
Clothes
Slug
clothes
Description
You will find clothes here
Repeat the process for each of the following categories:
Category name
Slug
Description
Shoes
shoes
You will find shoes here
Sportswear
sportswear
You will find sportswear here
Urban
urban
You will find urban-style items here
New arrival
new-arrival
You will find our latest arrivals here
Decor
decor
You will find decor items here
Accessories
accessories
You will find accessories here
Some categories overlap by design. Because the reference between products and categories is many-to-many, one product can belong to both New arrival and Sportswear at the same time.
Your Product categories view should now look like this:
Product categories in the content editor with entries
Product entries are created in two steps. In this step, you will create the basic product listing. Related products are added in the next step, once all product entries exist.
Go to Content, and under Default Views, click Product.
Click + Add entry.
Add product content entry
Create the first entry using the following information:
Field
Input
Product name
Black leather shoes
Product slug
black-leather-shoes
Product category
Click Add existing Product categories and select Shoes and New arrival
Product image
Click Add Product images, type black leather shoes in the search filter, and click Add selected images
Product description
These black leather shoes seamlessly blend sophistication with durability, making them a versatile choice for both formal occasions and everyday wear. The sleek design and high-quality leather ensure a timeless appeal that complements any outfit.
Product variant
Click Add component, select Shoes, then set Size to Size_40 and Color to Black
Product price
170
Product variant is the modular component field built in lesson 4.1. Clicking Add component presents the four product type options — Clothing, Shoes, Accessories, Decor. Selecting Shoes reveals only the shoe size and color fields, not the clothing size fields. This is the modular component working as configured.
Click Save & Publish.
Product content entry
Now create the remaining product entries using the following information:
Blue running shoes
Field
Input
Product name
Blue running shoes
Product slug
blue-running-shoes
Product category
Select Sportswear and Shoes
Product image
Select images with file name blue running shoes
Product description
These blue running shoes offer both form and function, providing exceptional support and style for your active pursuits. The breathable material and cushioned sole ensure a comfortable experience mile after mile.
Product variant
Select Shoes, then Size Size_42 and Color Blue
Product price
130
Plaid shirt
Field
Input
Product name
Plaid shirt
Product slug
plaid-shirt
Product category
Select New arrival, Urban, and Clothes
Product image
Select images with file name blue plaid shirt
Product description
This plaid shirt exudes a timeless charm, perfect for a casual day out or a relaxed evening gathering. The classic checkered pattern and comfortable fit make it a wardrobe staple for effortless style.
Product variant
Select Clothing, then Size XL and Color Blue
Product price
60
Necklace
Field
Input
Product name
Necklace
Product slug
necklace
Product category
Select Accessories
Product image
Select images with file name necklace
Product description
This white necklace is crafted from parts of seashells, evoking a relaxed, beachy vibe. Perfect for those looking to add a touch of the sea to their daily style.
Product variant
Select Accessories, then Color White
Product price
12
Headband
Field
Input
Product name
Headband
Product slug
headband
Product category
Select Accessories
Product image
Select images with file name headband
Product description
This white cotton headband provides an elegant and sophisticated touch to your hairstyle. Perfect for completing your look with a blend of fashion and comfort.
Product variant
Select Accessories, then Color White
Product price
9
Additional practice
For adding more product entries, see Create content — additional practice. Adding these is optional but some API Playground query exercises in lesson 7.1 reference them.
Now that you've created all product entries, you can add related products to each one.
Open the Headband entry to edit it.
Scroll to the Related Products component and click + Add Related Products.
The Title field is read-only and displays Related Products. This is because you set the field to read-only with an initial value when building the component in lesson 4.1. So, every instance of this component shows the same heading.
Click Add existing products and select: black leather shoes, necklace, blue running shoes, and plaid shirt.
Click Add selected products, then click Save & Publish.
Component with related products
Repeat for the remaining product entries:
Product entry
Related products
Blue running shoes
black leather shoes, necklace, headband, plaid shirt
Black leather shoes
blue running shoes, necklace, headband, plaid shirt
Necklace
black leather shoes, blue running shoes, headband, plaid shirt
Plaid shirt
black leather shoes, necklace, headband, blue running shoes
Create a blog post entry to use on the landing page.
Go to Content, and under Default Views, click Blog post.
Click + Add entry and fill in the following:
Field
Input
Title
Our new leather shoes
Slug
Auto-completes from the title. Leave as is.
Body
Type Take a look at this awesome new arrival. Then click Embed, select Block, choose the Product model from the dropdown, click Select model, and select the Black leather shoes entry.
You will create two landing pages: a homepage and a Summer Campaign page. The homepage could not have been created earlier because it references seller information, blog posts, and products that needed to exist first.
The Navigation model uses the Link component built in lesson 4.1. Each Nav Link entry in the navigation maps to one link in the frontend navigation bar.
Go to Content, and under Default Views, click Navigation.
Click + Add entry and fill in the following:
Field
Input
Nav ID
main
Click + Add Link to add the first Nav Link component and fill in:
Field
Input
Display Text
Clothes
Page
Leave empty
External URL
/category/clothes
Click + Add another Link and repeat for each of the following:
Shoes
Field
Input
Display Text
Shoes
Page
Leave empty
External URL
/category/shoes
Accessories
Field
Input
Display Text
Accessories
Page
Leave empty
External URL
/category/accessories
Decor
Field
Input
Display Text
Decor
Page
Leave empty
External URL
/category/decor
Summer Campaign
Field
Input
Display Text
Summer Campaign
Page
Click Add existing document and select the Summer Campaign landing page
External URL
Leave empty
Click Save & Publish.
The navigation entry now contains all the links the frontend needs. These will be visible when the storefront is connected in lesson 8.
In this lesson, you will populate the e-commerce project with content. The fields, dropdowns, references, and components in the content editor are a direct result of the schema built in lessons 1 through 5. If anything looks unexpected, it is worth returning to the relevant schema lesson to verify the configuration.
The lesson is structured in stages because some content depends on other content existing first. Products cannot have related products until other products exist. Landing pages cannot reference blog posts or categories until those entries are published. Follow the sections in order.
The cloned project already contains product images. You need to add alt text and a caption to the headband image to get started.
Add alt text and caption to assets
In your Hygraph project, click Assets.
Type headband in the search filter.
Open the first result to edit the asset.
Fill in the following fields and click Save & Publish:
Field
Input
Alt text
Cotton headband
Caption
A soft white cotton headband
Click the back arrow next to Edit Asset at the top left to return to the assets table.
Click the X next to the search filter to reset it.
Additional practice
For alt text and caption data for all remaining assets, see Create content — additional practice. Adding this data is optional and does not affect the frontend connection.
The Product category model was created in lesson 1.2 and connected to the Product model through a many-to-many reference in lesson 2.1. Each category entry created here can later be assigned to multiple products, and each product can belong to multiple categories.
No product entries exist yet, so you will create the categories first and add product assignments later.
Go to Content, and under Default Views, click Product category.
Click + Add entry.
Create the following entry and click Save & Publish:
Field
Input
Category name
Clothes
Slug
clothes
Description
You will find clothes here
Repeat the process for each of the following categories:
Category name
Slug
Description
Shoes
shoes
You will find shoes here
Sportswear
sportswear
You will find sportswear here
Urban
urban
You will find urban-style items here
New arrival
new-arrival
You will find our latest arrivals here
Decor
decor
You will find decor items here
Accessories
accessories
You will find accessories here
Some categories overlap by design. Because the reference between products and categories is many-to-many, one product can belong to both New arrival and Sportswear at the same time.
Your Product categories view should now look like this:
Product categories in the content editor with entries
Product entries are created in two steps. In this step, you will create the basic product listing. Related products are added in the next step, once all product entries exist.
Go to Content, and under Default Views, click Product.
Click + Add entry.
Add product content entry
Create the first entry using the following information:
Field
Input
Product name
Black leather shoes
Product slug
black-leather-shoes
Product category
Click Add existing Product categories and select Shoes and New arrival
Product image
Click Add Product images, type black leather shoes in the search filter, and click Add selected images
Product description
These black leather shoes seamlessly blend sophistication with durability, making them a versatile choice for both formal occasions and everyday wear. The sleek design and high-quality leather ensure a timeless appeal that complements any outfit.
Product variant
Click Add component, select Shoes, then set Size to Size_40 and Color to Black
Product price
170
Product variant is the modular component field built in lesson 4.1. Clicking Add component presents the four product type options — Clothing, Shoes, Accessories, Decor. Selecting Shoes reveals only the shoe size and color fields, not the clothing size fields. This is the modular component working as configured.
Click Save & Publish.
Product content entry
Now create the remaining product entries using the following information:
Blue running shoes
Field
Input
Product name
Blue running shoes
Product slug
blue-running-shoes
Product category
Select Sportswear and Shoes
Product image
Select images with file name blue running shoes
Product description
These blue running shoes offer both form and function, providing exceptional support and style for your active pursuits. The breathable material and cushioned sole ensure a comfortable experience mile after mile.
Product variant
Select Shoes, then Size Size_42 and Color Blue
Product price
130
Plaid shirt
Field
Input
Product name
Plaid shirt
Product slug
plaid-shirt
Product category
Select New arrival, Urban, and Clothes
Product image
Select images with file name blue plaid shirt
Product description
This plaid shirt exudes a timeless charm, perfect for a casual day out or a relaxed evening gathering. The classic checkered pattern and comfortable fit make it a wardrobe staple for effortless style.
Product variant
Select Clothing, then Size XL and Color Blue
Product price
60
Necklace
Field
Input
Product name
Necklace
Product slug
necklace
Product category
Select Accessories
Product image
Select images with file name necklace
Product description
This white necklace is crafted from parts of seashells, evoking a relaxed, beachy vibe. Perfect for those looking to add a touch of the sea to their daily style.
Product variant
Select Accessories, then Color White
Product price
12
Headband
Field
Input
Product name
Headband
Product slug
headband
Product category
Select Accessories
Product image
Select images with file name headband
Product description
This white cotton headband provides an elegant and sophisticated touch to your hairstyle. Perfect for completing your look with a blend of fashion and comfort.
Product variant
Select Accessories, then Color White
Product price
9
Additional practice
For adding more product entries, see Create content — additional practice. Adding these is optional but some API Playground query exercises in lesson 7.1 reference them.
Now that you've created all product entries, you can add related products to each one.
Open the Headband entry to edit it.
Scroll to the Related Products component and click + Add Related Products.
The Title field is read-only and displays Related Products. This is because you set the field to read-only with an initial value when building the component in lesson 4.1. So, every instance of this component shows the same heading.
Click Add existing products and select: black leather shoes, necklace, blue running shoes, and plaid shirt.
Click Add selected products, then click Save & Publish.
Component with related products
Repeat for the remaining product entries:
Product entry
Related products
Blue running shoes
black leather shoes, necklace, headband, plaid shirt
Black leather shoes
blue running shoes, necklace, headband, plaid shirt
Necklace
black leather shoes, blue running shoes, headband, plaid shirt
Plaid shirt
black leather shoes, necklace, headband, blue running shoes
Create a blog post entry to use on the landing page.
Go to Content, and under Default Views, click Blog post.
Click + Add entry and fill in the following:
Field
Input
Title
Our new leather shoes
Slug
Auto-completes from the title. Leave as is.
Body
Type Take a look at this awesome new arrival. Then click Embed, select Block, choose the Product model from the dropdown, click Select model, and select the Black leather shoes entry.
You will create two landing pages: a homepage and a Summer Campaign page. The homepage could not have been created earlier because it references seller information, blog posts, and products that needed to exist first.
The Navigation model uses the Link component built in lesson 4.1. Each Nav Link entry in the navigation maps to one link in the frontend navigation bar.
Go to Content, and under Default Views, click Navigation.
Click + Add entry and fill in the following:
Field
Input
Nav ID
main
Click + Add Link to add the first Nav Link component and fill in:
Field
Input
Display Text
Clothes
Page
Leave empty
External URL
/category/clothes
Click + Add another Link and repeat for each of the following:
Shoes
Field
Input
Display Text
Shoes
Page
Leave empty
External URL
/category/shoes
Accessories
Field
Input
Display Text
Accessories
Page
Leave empty
External URL
/category/accessories
Decor
Field
Input
Display Text
Decor
Page
Leave empty
External URL
/category/decor
Summer Campaign
Field
Input
Display Text
Summer Campaign
Page
Click Add existing document and select the Summer Campaign landing page
External URL
Leave empty
Click Save & Publish.
The navigation entry now contains all the links the frontend needs. These will be visible when the storefront is connected in lesson 8.
