Skip to content

Latest commit

 

History

History
 
 

examples

README.md

Hydrogen examples

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.

Full-featured example

See the full-featured example https://hydrogen.shop at https://github.com/Shopify/hydrogen-demo-store

Popular examples

These are some of the most commonly used Hydrogen examples. Browse the folders in this directory for the complete list.

Example Details
Analytics End-to-end example of how to implement analytics for Hydrogen.
B2B Headless B2B store front
Classic Remix Using Classic Remix Compiler rather than Remix Vite.
Custom Cart Method How to implementation custom cart method by showing in-line product option edit in cart.
Express Using NodeJS Express.
Infinite Scroll Infinite scroll within a product collection page using the Pagination component.
Legacy Customer Account Flow The legacy customer account flow made with Storefront API.
Metaobjects How to use metaobjects as a Content Management System (CMS) for Hydrogen.
Multipass Connect your existing third-party authentication method to Shopify’s customer accounts, so buyers can use a single login across multiple services.
Optimistic Cart UI How to optimistically remove a cart line item from the cart.
Partytown Lazy-loading Google Tag Manager using Partytown.feature.
Subscriptions Implementation of subscriptions for Hydrogen.
Third-party Queries and Caching How to leverage Oxygen's sub-request caching when querying third-party GraphQL API in Hydrogen.

Install an example

Setup a new project example by using the --template CLI param:

npm create @shopify/hydrogen@latest -- --template custom-cart-method

Request an example

If you don’t see the example you’re looking for, you can request one through the Discussions tab.

Contributing examples

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.

Creating new examples as diffs

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:

  1. 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.
  2. package.json must always be created with a unique name with example- prefix.
  3. dependencies, devDependencies, and peerDependencies in package.json are also merged to those in skeleton. Therefore, only list new or modified dependencies in the example.
  4. The scripts in package.json must pass the --diff flag to the dev and build commands. Otherwise, it will be treated as a full Hydrogen app instead of a diff.
  5. The tsconfig.json must have special values. Copy it from another existing diff example.
  6. Add the example package to workspaces option in the main repo package.json
  7. Add the new example in this README