Hydrogen Theme

A port of Hydrogen's default template to Shopify OS 2.0.

pika-1697163139924-1x

🔨 Requirements

This theme leverages the default Shopify theme folder structure and introduces the following directories, some of which have special behaviors.

└── hydrogen-theme
    └── frontend
        ├── entrypoints
        ├── islands
        ├── lib
        └── styles

Subdirectory	Description
`entrypoints`	The entry points for your theme
`islands`	The interactive islands in your theme
`lib`	Theme specific libraries
`styles`	The styles of your theme

Command	Action
`pnpm install`	Installs dependencies
`pnpm dev --live-reload full-page`	Launch the Shopify and Vite servers in parallel
`pnpm run deploy`	Bundle your theme's assets and upload your local theme files to Shopify

The following hydration strategies are available (borrowed from Astro).

Directive	Description
`client:idle`	Hydrate the component as soon as the main thread is free
`client:visible`	Hydrates the component as soon as the element enters the viewport
`client:media`	Hydrates the component as soon as the browser matches the given media query

Usage:

<my-component client:visible>This is an island.</my-component>

We would like to specifically thank the following projects for the inspiration and help regarding the creation of hydrogen-theme: