Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/montalvomiguelo/hydrogen-theme
A port of Hydrogen's default template to Shopify OS 2.0
https://github.com/montalvomiguelo/hydrogen-theme
hydrogen islands liquid shopify shopify-theme tailwindcss vite
Last synced: about 1 month ago
JSON representation
A port of Hydrogen's default template to Shopify OS 2.0
- Host: GitHub
- URL: https://github.com/montalvomiguelo/hydrogen-theme
- Owner: montalvomiguelo
- License: mit
- Created: 2022-08-01T05:33:41.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-10T23:22:18.000Z (7 months ago)
- Last Synced: 2024-11-30T09:58:11.766Z (about 2 months ago)
- Topics: hydrogen, islands, liquid, shopify, shopify-theme, tailwindcss, vite
- Language: Liquid
- Homepage: https://montalvomiguelo.myshopify.com/
- Size: 579 KB
- Stars: 124
- Watchers: 7
- Forks: 36
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Hydrogen Theme
[](https://github.com/montalvomiguelo/hydrogen-theme/actions/workflows/ci.yml?query=branch%3Amain)
[](https://github.com/montalvomiguelo/hydrogen-theme/blob/main/LICENSE.md)
A port of Hydrogen's default template to Shopify OS 2.0.
## 🔨 Requirements
- [Node.js (latest LTS version)](https://nodejs.org/en/)
- [pnpm](https://pnpm.io/)
- [Shopify CLI](https://shopify.dev/themes/tools/cli)
## 🚀 Project Structure
This theme leverages the [default Shopify theme folder structure](https://shopify.dev/themes/tools/github#repository-structure) and introduces the following directories, some of which have special behaviors.
```bash
└── 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](https://docs.astro.build/en/concepts/islands/)).
| Directive | Description |
| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ |
| `client:idle` | Hydrate the component as soon as the main thread is [free](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback) |
| `client:visible` | Hydrates the component as soon as the element [enters the viewport](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) |
| `client:media` | Hydrates the component as soon as the browser [matches the given media query](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) |
Usage:
```html
This is an island.
```
## 🙇♂️ Thanks
We would like to specifically thank the following projects for the inspiration and help regarding the creation of hydrogen-theme:
- [vite-plugin-shopify](https://github.com/barrel/shopify-vite)
- [hydrogen](https://github.com/Shopify/hydrogen)
- [dawn](https://github.com/Shopify/dawn)
- [astro](https://github.com/withastro/astro)