Which Shopify Apps Work in Hydrogen? A Compatibility Matrix

Introduction

Migrating to Hydrogen unlocks speed and flexibility — but it also exposes a harsh truth: not all Shopify apps are compatible.

Apps built for Liquid themes often rely on DOM injection or theme extensions. Hydrogen, by contrast, is React + API-first. Merchants and agencies need a compatibility matrix to plan migrations intelligently.

Why Compatibility Matters

  • ❌ Lost functionality → reviews, loyalty, pop-ups disappear on launch day.
  • ⚠️ Migration delays → missing integrations stall projects.
  • 💸 Wasted spend → merchants pay for apps they can’t use.
  • ✅ Agency upsell → consulting on app stacks becomes a billable service.

Compatibility Matrix (Sample)

Category App
Examples
Hydrogen
Support
Notes
Subscriptions Recharge, Skio ✅ SDKs + APIs API-first, safe to integrate.
Loyalty Yotpo, Smile.io ✅ SDKs available DOM widgets fail; replace with APIs.
Reviews Yotpo, Judge.me, Okendo ⚠️ Partial (wrappers) Requires React wrappers for widgets.
Personalization Rebuy, Nosto, Algolia ✅ API + SDK Strong Hydrogen support.
Analytics Google Analytics, GA4, Amplitude ✅ Edge events Replace DOM snippets with server events.
Pop-ups/Widgets Privy, Justuno ❌ Not supported DOM injection breaks in Hydrogen.
Helpdesk Gorgias, Zendesk ✅ SDKs + APIs Safe to wire via API.

Integration Paths

  1. Direct API Calls
    • Fetch app data in Hydrogen loaders.
    • Example: loyalty points from Yotpo API.
  2. SDKs
    • Some apps publish React SDKs (e.g., Rebuy).
  3. Wrapper Components
    • Create custom React components for apps like reviews.
  4. Hybrid Builds
    • Keep some Liquid sections (pop-ups, niche apps) while migrating rest.

Case Example: Fashion Retailer

  • Migrated from Liquid to Hydrogen.
  • App audit → 14 apps in use.
  • Result:
    • 9 apps supported in Hydrogen.
    • 3 replaced with API-first alternatives.
    • 2 dropped (pop-ups, redundant reviews).
  • Outcome: faster load, fewer app conflicts, streamlined stack.

Guardrails

  • ✅ Audit apps before migration.
  • ✅ Replace DOM-injection apps early.
  • ✅ Train teams to build React wrappers.
  • ✅ Deliver compatibility matrix to clients as part of proposal.

Conclusion

Hydrogen isn’t app-incompatible — it’s API-first. Merchants and agencies must audit their stacks, identify unsupported apps, and replace them with SDK or API integrations.

The right matrix = smoother migrations, happier merchants.