The example apps in this directory show how to implement popular design patterns in Hydrogen.
Each example only contains the files that are different from Hydrogen’s Skeleton template, but it's still possible to inspect and run them locally. See each example's README file for details on the problem it solves, how the solution works, and any other requirements you’ll need.
Examples are kept intentionally minimal, containing only the new and updated code required to illustrate a working use case.
These are some of the most commonly used Hydrogen examples. Browse the folders in this directory for the complete list.
| Example | Details |
|---|---|
| Custom Cart Method | How to implementation custom cart method by showing in-line product option edit in cart. |
| Express | Hydrogen example using NodeJS Express. |
| Legacy Customer Account Flow | The legacy customer account flow made with Storefront API. |
| Multipass | Connect your existing third-party authentication method to Shopify’s customer accounts, so buyers can use a single login across multiple services. |
| Metaobjects | How to use metaobjects as a Content Management System (CMS) for Hydrogen. |
| Optimistic Cart UI | How to optimistically remove a cart line item from the cart. |
| Third-party Queries and Caching | How to leverage Oxygen's sub-request caching when querying third-party GraphQL API in Hydrogen. |
If you don’t see the example you’re looking for, you can request one through the Discussions tab.
Hydrogen is an open-source project, and we welcome your input! See the Hydrogen contribution docs for more details on how to add your own examples to this repo.
An example diff is a partial Hydrogen app that only contains the files that change from the skeleton template. The Hydrogen CLI will merge the example diff on top of the skeleton template in a temporary directory before running the dev or build commands.
Keep the following in mind when creating a new example diff:
- Start a new example diff by copying another minimal example and changing code. Only include and commit files that are different from the skeleton template.
package.jsonmust always be created with a unique name with example- prefix.dependencies,devDependencies, andpeerDependenciesinpackage.jsonare also merged to those in skeleton. Therefore, only list new or modified dependencies in the example.- The scripts in
package.jsonmust pass the--diffflag to thedevandbuildcommands. Otherwise, it will be treated as a full Hydrogen app instead of a diff. - The
tsconfig.jsonmust have special values. Copy it from another existing diff example. - Add the example package to
workspacesoption in the main repo package.json - Add the new example in this README