notableadii/hydrogen-theme

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

⚡️ Hydrogen Theme

Hydrogen Theme is a framework for building unparalleled performant storefronts on Shopify and Online Store 2.0.

Features

• 👨‍💻 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

Requirements

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

Directory 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
        │   └── # only Vite entry files here
        ├── islands
        │   └── # the interactive islands in your theme
        ├── lib
        │   └── # theme specific libraries
        └── styles
            └── # the styles of your theme

Setup

# Make sure to install the dependencies
pnpm install

Development Server

# Launch the Shopify and Vite servers in parallel
pnpm dev -- --store johns-apparel --live-reload full-page

Production

# Bundle your theme's assets and upload your local theme files to Shopify
pnpm run deploy --store johns-apparel

Checkout Shopify CLI commands for themes for more information.

Hydration Directives

The following hydration strategies are available (borrowed from Astro).

• 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.

<is-land client:visible>This is an island.</is-land>

Thanks

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

• hydrogen
• Dawn
• astro
• iles
• fresh

License

This project is licensed under the MIT License.