Contentful and Shopify's Hydrogen Starter

Hydrogen seamlessly fetches content from Shopify and other data sources, powering the customer experiences built with Contentful’s flexible content models.

What is Hydrogen

Hydrogen is Shopify’s React-based framework for building custom storefronts.

Secure prerequisites

To get started, you’ll need the following:

A Contentful Space with content.

NodeJS installed locally.

Contentful CLI (optional).

Start a new Hydrogen project

Open the Terminal and perform the following steps:

1. Create your Hydrogen app:

Then enter YOUR_APP_NAME

2. Choose the “Demo App” template

3. Navigate to your app directory and install dependencies:

Alternatively, you could use npm:

4. Create an .env file at the root of your project and define your Contentful environment variables:

Note: You can find your Contentful environment variables in the web app by clicking Settings => API Keys.

Create your Contentful request

Now, create a React hook useContentfulQuery that talks to the Contentful GraphQL API and fetches your content:

1. Create a new file in src/api/useContentfulQuery.jsx:

2. Make your first query in Contentful.

Note: Shopify uses handle as a key to query and fetch a specific product, so you might have a field in your content model that matches that, for example: the-full-stack in http://localhost:3000/products/the-full-stack

Note: View an example of using Contentful query in a React component here.

After you’re done with your first query to Contentful, you can dig into your content using our Contentful GraphQL Playground app and hack away!

Note: Now you can view your app with Contentful data locally on http://localhost:3000/products/the-full-stack

3. Optional: Pre-fill your Contentful space with content.

To fill your space with content, you can use one of the following options:

Create new content - Start creating your content from scratch.

Import example content - You can import some example content to get started quickly. Use the Contentful export, which includes predefined content models and content.

To import content into your space, you must be logged in and have the Contentful CLI installed. Once those requirements are met, run the following command in your terminal:

Deploy your app

To deploy your Hydrogen app, follow the instructions set out in Hydrogen’s recommended steps for deployment.

To view the final project code, visit GitHub.

Choose your technology path with our language and framework agnostic CMS

Start building

Bundle of technologies that can be used with Contentful.

Partner with us