Kona Theme

Introduction ​

Get your dev environment running and start building with islands, Vite, and Tailwind. Kona is a Shopify theme where Liquid renders HTML server-side and interactive components hydrate client-side as vanilla Web Components — no framework runtime ships to the browser.

Requirements ​

  • Node.js 20+
  • pnpm 10+ — activate with corepack enable
  • Shopify CLI — npm install -g @shopify/cli
  • A Shopify Partner account with a development store

Quick start ​

bash
git clone https://github.com/jonathanmoore/kona-theme.git
cd kona-theme
pnpm install
pnpm dev -- --store my-store.myshopify.com

This starts two servers concurrently: Shopify CLI (proxies your store) and Vite (serves JS/CSS with HMR at localhost:5173). Open the URL printed by Shopify CLI to see the theme.

Demo store ​

See Kona running live at kona-theme.myshopify.com.

Next steps ​

Acknowledgments ​

Kona builds on the shoulders of excellent open-source work:

  • hydrogen-theme by Miguel Montalvo — A port of Hydrogen's default template to Shopify OS 2.0. Kona's design language and Liquid architecture draw heavily from this project. Thank you, Miguel.
  • vite-plugin-shopify by Barrel — Core Vite/Shopify integration that generates vite-tag.liquid and wires up entry points, HMR, and CDN asset URLs.
  • vite-plugin-shopify-theme-islands by Alex Rees — The island hydration runtime and client:* directive system that powers Kona's partial hydration architecture.
  • vite-plugin-shopify-import-maps by slavamak — ES module import map generation for bare module imports in islands.
  • @driver-digital/vite-plugin-shopify-clean by Driver Digital — Stale build artifact cleanup for the theme/assets/ directory.
  • Tailwind CSS and @tailwindcss/vite by Tailwind Labs — CSS-first utility framework powering the entire design system.
  • Vite — The build tool that makes all of this fast.