Hydrogen Theme
March 4, 2025 · View on GitHub
A port of Hydrogen's default template to Shopify OS 2.0.
🔨 Requirements
🚀 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 -- --store johns-apparel | 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: