Starter template to create a Shopify custom storefront with Contentful and Hydrogen

Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.

Contentful is the most flexible and easy headless CMS that can power up your customer shopping experience with flexible content models, and field editors for authors to collaborate and manage content.

Check out the docs

• Styling with Tailwind
• End-to-end testing with Playwright
• Unit testing with Vitest and Testing Library
• Code formatting with Prettier
• Javascript linting with ESLint and the Hydrogen ESLint plugin
• Contentful

Requirements:

Add your Contentful space Id and preview access token to .env

CONTENTFUL_SPACE_ID=YOUR_SPACE_ID
CONTENTFUL_ACCESS_TOKEN=YOUR_PREVIEW_ACCESS_TOKEN

• Node.js version 16.5.0 or higher
• Yarn

yarn
yarn dev

Optionally you can pre-fill your Contentful empty space with Content:

Install contentful cli and import ./contentful-export.json content.

In the project root folder run the following in your terminal:

npm i -g contentful-cli
# Then
contentful space import --space-id YOUR_SPACE_ID --content-file ./contentful-export.json

Remember to update hydrogen.config.js with your shop's domain and Storefront API token!

To run a local preview of your Hydrogen app in an environment similar to Oxygen, build your Hydrogen app and then run yarn preview:

yarn build
yarn preview

yarn build

This project contains basic end-to-end (E2E) tests in the /tests/e2e folder powered by Vitest.

You can run tests in development, and they will automatically reload when you make changes to the component you provide to hydrogen.watchForUpdates():

yarn test

To run tests in a continuous-integration (CI) environment like GitHub Actions:

yarn test:ci