Better CMS Workflows in Hydrogen: Making Headless Merchant-Friendly
Introduction
Hydrogen is developer-first. That’s great for engineers — but marketers and content teams often feel locked out.
In Liquid, Shopify’s Online Store Editor gave them drag-and-drop control. In Hydrogen, content often lives in JSON files or APIs that require developer intervention.
The fix? Integrating a CMS that restores marketer autonomy without breaking Hydrogen’s composability.
The CMS Challenge in Hydrogen
- ❌ JSON-driven workflows → bottlenecked on developers.
- ❌ Preview pain → marketers can’t see changes until deploy.
- ❌ Lost flexibility → teams can’t spin up landing pages fast.
👉 Without a CMS, Hydrogen slows down content velocity.
CMS Options for Hydrogen
1. Sanity
- Structured, API-first.
- Real-time collaboration.
- Flexible schemas → perfect for complex brands.
- Trade-off: less “drag-and-drop” friendly.
2. Contentful
- Enterprise-grade, rich integration ecosystem.
- Great for multi-market, multi-language.
- Trade-off: high cost, steeper learning curve.
3. TinaCMS
- Inline editing → marketers see edits in real time.
- Easy setup with Hydrogen.
- Trade-off: less structured, smaller ecosystem.
Workflow Enhancements
- Preview Mode → let marketers see changes in staging instantly.
- Content Sync → connect CMS to Hydrogen with live updates.
- Role Management → give marketers access to content only, devs to schemas.
Case Example: Beauty Brand
- Pre-CMS: content changes = 7-day cycle (dev edits JSON, QA, deploy).
- Migration: Sanity CMS + preview mode in Hydrogen.
- Post-CMS: content updates in 1 day, marketing team owned landing pages.
- Outcome: campaign velocity improved 85%.
Guardrails
- ✅ Don’t leave content in hard-coded JSON.
- ✅ Match CMS to brand size (Sanity for complex, TinaCMS for agile).
- ✅ Always enable preview for marketers.
- ✅ Document CMS-Hydrogen workflows clearly.
Conclusion
Hydrogen doesn’t need to sacrifice marketer velocity. By integrating the right CMS, brands keep the flexibility of headless while restoring the control merchants expect.
Developers build the frame. Marketers paint the picture.