Open source · MIT Licensed

A working Hydrogen starter
with a free CMS.

Shopify Hydrogen + Vercel deployment + Metaobjects as CMS.
No $99/month headless CMS fees.

Quick start
npx degit nathanmcmullendev/hydrogen-mockshop-clone my-store
View Demo View Source

What's included

Vercel Deployment

Pre-configured for Vercel. Deploy in 90 seconds with npx vercel

Metaobjects CMS

14 section types using native Shopify Metaobjects. Free forever.

Full Store Features

Cart, search, collections, product pages, wishlist. Everything working.

Works with mock.shop

Try it without a Shopify account using Shopify's demo API.

Why Metaobjects instead of a headless CMS?

Most Hydrogen tutorials tell you to use Sanity, Contentful, or Builder.io for content management. These start at $99/month.

Metaobjects are free. They're built into Shopify. You manage content in the same admin where you manage products. No external service, no extra cost, no API keys.

Learn about Metaobjects in Shopify docs →

14 Section Types

View all sections
Hero Hero Slider Featured Products Collection Grid Rich Text Image + Text Video Testimonials Logos FAQ Features Banner Countdown Newsletter
app/sections/Sections.tsx 
import {Sections, SECTIONS_FRAGMENT} from './sections';

// In your route loader
const {metaobject} = await storefront.query(ROUTE_QUERY);

// Renders CMS-driven sections
<Sections sections={metaobject} />

How to use

  1. 1
    Clone the starter npx degit nathanmcmullendev/hydrogen-mockshop-clone my-store
  2. 2
    Install and run cd my-store && npm install && npm run dev
  3. 3
    Connect your store (optional) Add your Shopify domain and Storefront API token to .env
  4. 4
    Deploy to Vercel npx vercel

Resources

Hydrogen Docs

Official Shopify documentation

Metaobjects Docs

Learn the CMS pattern

awesome-hydrogen

Curated resources list