benjaminsehl / hydrogen-theme

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

Hydrogen Theme

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

🔨 Requirements

• Node.js (latest LTS version)
• pnpm
• Shopify CLI

🚀 Project Structure

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

🧞 Commands

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

🏝️ Hydration Directives

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>

🙇‍♂️ Thanks

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

• vite-plugin-shopify
• hydrogen
• dawn
• astro