DEV Community

Nathan M
Nathan M

Posted on

I replaced a $99/month headless CMS with Shopify's built-in Metaobjects — here's the full starter

#shopify #react #typescript #opensource

Every Hydrogen tutorial eventually hits the same wall.

You've got your storefront working. Products loading. Cart functional. Then the tutorial says:

"For content management, add Sanity."

Or Contentful. Or Builder.io. The cheapest plan starts at $99/month. You haven't made a single sale yet.

There's a better way.

Metaobjects: The free CMS already inside Shopify

Metaobjects are Shopify's native custom data type. They live in the same admin where you manage products. Free, forever, no extra API keys, no third-party login.

The pattern is simple:

import { Sections, SECTIONS_FRAGMENT } from './sections';

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

// Renders CMS-driven sections
<Sections sections={metaobject} />
Enter fullscreen mode Exit fullscreen mode

Your content editors work entirely inside Shopify admin. No new tool to learn. No monthly bill.

What I built

A complete Hydrogen starter built around this pattern.

14 CMS-driven section types:

Section Section Section
Hero Hero Slider Featured Products
Collection Grid Rich Text Image + Text
Video Testimonials Logos
FAQ Features Banner
Countdown Newsletter

Full store features:

  • Cart, wishlist, search, collections, product pages
  • Works with mock.shop out of the box — no Shopify account needed
  • Pre-configured Vercel deployment — live in 90 seconds

One command to start:

npx degit nathanmcmullendev/hydrogen-mockshop-clone my-store
cd my-store && npm install && npm run dev
Enter fullscreen mode Exit fullscreen mode

Deploy to Vercel:

npx vercel
Enter fullscreen mode Exit fullscreen mode

Why Metaobjects instead of a headless CMS?

The standard Hydrogen + Sanity setup costs $99/month minimum before launch. For an agency building client stores, that's overhead on every project. For an indie developer, that's a real barrier to shipping.

Metaobjects eliminate that entirely:

Sanity / Contentful Metaobjects
Cost $99–$300/month Free
Login Separate service Inside Shopify admin
API keys Extra setup Already configured
Learning curve New tool Same admin as products

Same functionality. Zero extra cost.

How content management works

Instead of writing to an external CMS, your content editors create and edit Metaobjects directly in Shopify:

  1. Go to Shopify Admin → Content → Metaobjects
  2. Create a page metaobject
  3. Add sections (Hero, Featured Products, etc.)
  4. Save — changes are live instantly

No deployments needed for content updates.

Connect your own store (optional)

The starter works with mock.shop by default. To connect your real Shopify store:

PUBLIC_STOREFRONT_API_TOKEN=your_token_here
PUBLIC_STORE_DOMAIN=yourstore.myshopify.com
Enter fullscreen mode Exit fullscreen mode

That's it. One env file.

Links

MIT licensed. Open source. Built for anyone learning or building with Hydrogen.

Happy to answer questions about the Metaobjects pattern or section architecture in the comments. If it saves you setup time, a ⭐ on the repo is always appreciated.

Top comments (0)