๐ง This project aims to bring the magic of Shopify's Hydrogen storefront features to the Svelte world. This project is still on the assembly line, but I'm aiming to shape it into a go-to boilerplate/template that can ease the process of building a personalized Shopify storefront using everyone's beloved JavaScript framework - Sveltekit.
๐ง What is Hydrogen?
Hydrogen is Shopifyโs stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications. Hydrogen is designed to dovetail with Remix, Shopifyโs full stack web framework, but it also provides a React library portable to other supporting frameworks.
All the features you'd expect from a modern headless eCommerce storefront, and more:
Almost every aspect and feature of a Shopify theme is covered in this project. Here's a list of the features that are currently implemented:
Before getting started, make sure you have the following:
๐ Clone the repo
๐ป Install Dependencies
pnpm install
You can use your package manager of choice, but I strongly recommend
pnpm
๐ Create a .env file in the root of the project and fill in the required variables
An example .env.example file is provided to guide you, the two essentials that need replacing are:
PUBLIC_STOREFRONT_API_TOKEN="your-public-token-here"
PUBLIC_STORE_DOMAIN="your-store.myshopify.com"
# Optional
PUBLIC_STOREFRONT_API_VERSION="2023-07"
To get the
PUBLIC_STOREFRONT_API_TOKEN
andPUBLIC_STORE_DOMAIN
, refer to the Shopify API Documentation here.
๐ฆ Run the project locally
pnpm dev
๐ Start building your storefront!
There's more under the hood, and detailed documentation is coming soon.