Why Your Liquid Apps Won’t Just Work in Hydrogen

By nuwudorder | September 23, 2025

Introduction

Merchants moving from Liquid to Hydrogen often assume their app stack will “just work.” Reality check: most apps built for Liquid themes don’t translate.

This post explains why Liquid apps fail in Hydrogen, which categories are most impacted, and how agencies can guide merchants through compatibility planning.

Why Liquid Apps Break in Hydrogen

  • ❌ DOM Injection
    • Many apps rely on injecting <script> tags into Liquid templates.
    • Hydrogen’s React runtime blocks this pattern.
  • ❌ Checkout.liquid Assumptions
    • Some apps expect to modify checkout.liquid — not possible in Hydrogen.
  • ❌ Legacy Login Flows
    • Apps tied to classic customer accounts fail with new Customer API.

👉 If an app assumes DOM access or checkout modification, it’s incompatible.

Categories of App Gaps

Category Status in
Hydrogen		 Notes
Subscriptions ✅ API-first (Recharge, Skio) SDK or API-based integrations.
Loyalty ⚠️ Wrappers needed DOM widgets fail, API works.
Reviews ⚠️ Partial support Requires React wrapper components.
Analytics ✅ API-first (GA, Amplitude) Server-side tagging preferred.
Personalization ✅ API/SDK available Strong Hydrogen fit.
Pop-ups/Widgets ❌ Not supported DOM injection breaks entirely.

Workarounds

  1. SDK Integrations
    • Many vendors (Recharge, Algolia) ship API-first SDKs.
  2. React Wrappers
    • Build custom React components for reviews/loyalty.
  3. Hybrid Builds
    • Keep some Liquid sections for unsupported apps while phasing Hydrogen.

Case Example: Retailer Migration

  • Pre-migration: 12 apps in Liquid.
  • Audit revealed:
    • 7 API-compatible.
    • 3 required React wrappers.
    • 2 dropped (pop-ups).
  • Outcome: Hydrogen store launched with leaner, API-first stack.

Guardrails

  • ✅ Audit app stack before migration.
  • ✅ Flag DOM-injection apps for replacement.
  • ✅ Offer “compatibility matrix” deliverable to clients.
  • ✅ Build wrapper library for repeatable patterns.

Conclusion

Hydrogen isn’t app-hostile — it’s API-first. Merchants must audit and adapt their app stack, replacing DOM-based apps with SDKs, APIs, or React wrappers.

Don’t assume → audit, adapt, and thrive.

Posted in Blog

About nuwudorder