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
- Direct API Calls
- Fetch app data in Hydrogen loaders.
- Example: loyalty points from Yotpo API.
- SDKs
- Some apps publish React SDKs (e.g., Rebuy).
- Wrapper Components
- Create custom React components for apps like reviews.
- 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.