A port of Hydrogen's default template to Shopify OS 2.0.
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:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent