Hydrogen Theme is a framework for building unparalleled performant storefronts on Shopify and Online Store 2.0.
- 👨💻 Best-in-class DX - instant reloading powered by vite-plugin-shopify
- 🔋 Batteries included - theme files ported over from Dawn
- ✨ Web-native in its purest form - it focuses on evergreen browsers
- 🏝 Islands architecture - zero JS by default, hydrates the interactive bits
- 💄 Integration with Tailwind CSS - for styling
- 🚀 Production-ready scores - as measured in Lighthouse and PageSpeed Insights
This theme leverages the default Shopify theme folder structure and introduces the following directories, some of which have special behaviors.
└── hydrogen-theme
└── frontend
├── entrypoints
│ └── # only Vite entry files here
├── islands
│ └── # the interactive islands in your theme
├── lib
│ └── # theme specific libraries
└── styles
└── # the styles of your theme# Make sure to install the dependencies
pnpm install# Launch the Shopify and Vite servers in parallel
pnpm dev -- --store johns-apparel --live-reload full-page# Bundle your theme's assets and upload your local theme files to Shopify
pnpm run deploy --store johns-apparelCheckout Shopify CLI commands for themes for more information.
The following hydration strategies are available (borrowed from Astro).
client:idleHydrate the component as soon as the main thread is free.client:visibleHydrates the component as soon as the element enters the viewport.client:mediaHydrates the component as soon as the browser matches the given media query.
<is-land client:visible>This is an island.</is-land>We would like to specifically thank the following projects for the inspiration and help regarding the creation of hydrogen-theme:
This project is licensed under the MIT License.