Easily restore your project to a previous version with our new Instant One-click Backup Recovery
Hygraph
Docs
You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

Hygraph recipes

#Overview

Hygraph Recipes is a collection of developer resources that can help you discover how to combine different field types to create schema elements.

You will find documentation sections - which we are calling Cookbooks - based on real-life use cases. Each cookbook contains a number of guides - or Recipes! - that show different ways of creating an element type.

You can use this content to learn how to work with Hygraph and discover what you can do with it, or clone projects that already contain schema elements to save yourself time!

Each recipe offers 2 paths:

  • A step-by-step guide, in case you want to build these elements from scratch.
  • A clonable cookbook project containing several recipes, in case you want to compare the different ways to build a schema element.

#Highlights

Banners

Buttons

Card Grid

CTA

FAQ

Headers & footers

Image galleries

Navigation

Page sections

Product page

Taxonomy

#Recipes list

CookbookRecipeDescription
BannersSimple bannerLearn how to create a simple banner
BannersReferences bannerLearn how to create a banner model that allows you to easily reference content from other models
BannersBanner sliderLearn how to create a banner slide where you can add multiple banners that will change on a timer
BannersImage bannerLearn how to create an image banner with
ButtonsSimple buttonLearn how to create a simple button
ButtonsSocial linksLearn how to create a to link your socials
ButtonsStyled button linkLearn how to create a link button that uses style dropdowns
Card GridCard grid with componentsLearn how to create a card grid using components
Card GridCard grid with referencesLearn how to create a card grid using references
CTASimple CTALearn how to create a simple CTA
CTACTA with socialsLearn how to create a CTA with social links
CTAStyled CTALearn how to create a CTA with style dropdowns
FAQBlocks FAQ PageLearn how to create an FAQ Model that lets you add different sets of FAQ as blocks.
FAQConditional FAQ ListLearn how to create an FAQ Model that lets you select from different tables of predefined Q&A pairs based on condition.
FAQReference FAQ ComponentLearn how to create an FAQ Component that lets you form a list of predefined Q&A pairs.
FAQSectioned FAQ PageLearn how to create an FAQ model that lets you add lists of topic-based Q&A lists.
FAQSimple FAQ PageLearn how to create an FAQ model that lets you add a list of Q&A pairs.
Headers & FootersFooter with linksLearn how to create a footer with links
Headers & FootersFooter with sectionsLearn how to create a footer with columns as sections
Headers & FootersHeader with linksLearn how to create a header with links
Headers & FootersHeader with notificationLearn how to create a header with a notifications line at the top
Image galleriesFormatted gallery sectionLearn how to create an image gallery component with format dropdowns and columns
Image galleriesGallery with informationLearn how to create an image gallery model with a basic component fields to add images with metadata
Image galleriesStyled image galleryLearn how to create an image gallery component with style
NavigationSimple navigationLearn how to create a simple navigation
NavigationStyled navigationLearn how to create a navigation with style dropdowns
NavigationSectioned navigationLearn how to create navigation with internal sections
Page sectionsMulti-purpose sectionLearn how to create a multi-purpose section component that you can add as a block selector to different models in your schema
Page sectionsRelated content blockLearn how to create a related content block component containing a title, a body, an image, and a reference
Page sectionsLanding pageLearn how to create a dynamic landing page model that will allow you to create different landing page configurations
Product PageProduct Page eCommerceLearn how to create a Product model for eCommerce with Product information stored in the CMS.
Product PageProduct Page with Akeneo appLearn how to create a Product model in Hygraph that fetches product information from an external PIM (Akeneo) via app integrations.
Product PageProduct Page with Remote SourceLearn how to create a Product model in Hygraph that fetches product information from an external PIM via Remote Sources.
Product PageRelated Product PagesLearn how to create interconnected Product models for an online bookstore with Product information stored in the CMS.
TaxonomyFlat Taxonomy modelLearn how to create a flat taxonomy model.
TaxonomyTwo-level taxonomy modelLearn how to create a two-level taxonomy model that lets you select parent categories that displays reference fields to add related sub-categories.