Headless CMS for Hydrogen

Hygraph is the ideal Headless CMS for Hydrogen eCommerce websites. Read further to learn how our API-first CMS allows you to add components to your Hydrogen apps in minutes and enable your website's content to be managed from a powerful CMS.

Step #1 - Fetching content from a headless CMS in Hydrogen

To fetch the content from the Hygraph you can use Hydrogen's useShopQuery along with a GraphQL query to fetch data from a GraphQL API. The query requests a list of the first 10 products, including their id, title, description, image and slug.

This is done within a functional component named Products, which then passes the fetched data (data.products) to the ProductList component for rendering.

src/routes/products.jsx

import { useShopQuery, gql } from '@shopify/hydrogen';

export default function Products() {
  const { data } = useShopQuery({
    query: gql`
      query ProductsQuery {
        products(first: 10) {
          id
          title
          description
          slug
          image {
            url
          }
        }
      }
    `,
  });

  return <ProductList products={data.products} />;
}

Step #2 - Work with data in a Hydrogen component

The ProductList component receives the products data as a prop. The component first checks if the products data is available. If it is, it iterates over the products array using map, displaying each product's title, description, image and linking to it.

This approach ensures that the UI dynamically updates to show the products once the data is successfully fetched and provided by the Products component.

src/components/ProductList.jsx

export default function ProductList({ products }) {
  if (!products) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {products.map((product) => (
        <a key={product.id} href={product.slug}>
          <img src={product.image.url} alt={product.title} />
          <h2>{product.title}</h2>
          <p>{product.description}</p>
        </a>
      ))}
    </div>
  );
}

Start building with Hydrogen and Hygraph

We made it really easy to set up your project in Hygraph and use our GraphQL API within your Hydrogen project.

Quickstart

Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Hydrogen eCommerce website.

Get Started

Learn GraphQL

Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.

Read the Guide

Examples

Look at some of the example projects to see Hygraph in action.

See Examples

Why Hygraph

Choosing Hygraph for your Hydrogen project

Using a GraphQL-native headless CMS in conjunction with Shopify's Hydrogen framework offers significant advantages for eCommerce websites. For developers, it provides the flexibility to create rich, customized user experiences tailored to specific brand needs while efficiently managing data through GraphQL's powerful querying capabilities.

For content editors, a headless CMS decouples content management from the presentation layer, enabling them to update content seamlessly without affecting the site's layout or requiring developer intervention. This separation enhances content agility and allows for quicker updates, which is crucial in the dynamic world of eCommerce where timely content updates can significantly impact customer engagement and sales.

Developer Experience

We try to be the most un-opinionated CMS on the market with a wide collection of open source example projects to get you started.

Headless CMS

As a headless CMS (i.e. API based content management), you can be as modular and flexible as you need. We even support multiplatform content management.

Management API

Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.

Get started for free, or request a demo to discuss larger projects

Contact sales Get started