Skip to content

Latest commit

 

History

History
 
 

templates

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 

Hydrogen templates

Hydrogen templates are complete working implementations of Shopify custom storefronts. You can automatically scaffold these storefronts with Shopify CLI.

Demo store

## Create a Hydrogen app with the default Demo store template
## Use `--template demo-store` to set the template explicitly
# yarn
$ yarn create @shopify/hydrogen --template demo-store
# npm
$ npm init @shopify/hydrogen -- --template demo-store
# npx
$ npx @shopify/create-hydrogen --template demo-store

Demo Store is the default template installed when creating a new Hydrogen storefront. It’s a complete Hydrogen storefront that uses live production data provided by Shopify. It includes demonstration implementations of a homepage, product detail pages, collections, data-fetching, caching strategies, Tailwind integration, and more. It showcases Shopify’s opinionated best practices for building storefronts with Hydrogen, and some advanced features of the framework. Pick this template to inspect a working Hydrogen codebase, or to use as a starting point for your own build.

Hello World in TypeScript

## Create a Hydrogen app with the Hello World template
# yarn
$ yarn create @shopify/hydrogen --template hello-world-ts
# npm
$ npm init @shopify/hydrogen --template hello-world-ts
# npx
$ npx @shopify/create-hydrogen --template hello-world-ts

Hello World in TypeScript is a minimal implementation of a Hydrogen app in TypeScript. It has few dependencies and very little boilerplate. Pick this template to start building from scratch.

Hello World in JavaScript

## Create a Hydrogen app with the Hello World template
# yarn
$ yarn create @shopify/hydrogen --template hello-world
# npm
$ npm init @shopify/hydrogen --template hello-world
# npx
$ npx @shopify/create-hydrogen --template hello-world

Hello World in JavaScript is a generated JavaScript implementation of the Hello WOrld in TypeScript template.