Hydrogen + Oxygen App Compatibility Matrix: What Works, What Breaks, and How to Adapt
Introduction
One of the biggest questions merchants ask before moving from Liquid themes to Hydrogen/Oxygen is: “Will my apps still work?”
The answer: some will, some won’t. Apps built for Liquid often rely on script injection or theme extension points that don’t exist in Hydrogen. Others — especially SDK- or API-based apps — work seamlessly.
This post provides a compatibility matrix for common Shopify apps (subscriptions, reviews, personalization, analytics, loyalty), plus strategies for migration and adaptation.
Why Apps Break in Hydrogen
- Liquid dependency: Many apps inject Liquid snippets into themes (e.g., {{ content_for_header }} blocks). Hydrogen doesn’t use Liquid, so these integrations vanish.
- DOM assumptions: Apps expecting <div id="product-form"> may fail if Hydrogen structures differ.
- Checkout restrictions: Apps tied to classic checkout.liquid may break under Oxygen.
- API-first apps: Apps built on REST/GraphQL APIs or SDKs usually work fine.
Compatibility Matrix
| App Category | Works Seamlessly (API/SDK) | Needs Wrappers/Adaptation | Likely to Break in Hydrogen |
| Subscriptions | Recharge (API-first) | Skio (needs custom cart hooks) | Old Liquid injection subs apps |
| Reviews | Yotpo (GraphQL SDK) | Judge.me (needs embed wrappers) | Liquid-based review widgets |
| Personalization | Klaviyo (API + JS SDK) | Nosto (requires edge middleware) | Legacy personalization scripts |
| Loyalty | Smile.io (API + widgets) | LoyaltyLion (needs SSR-safe SDK wrapper) | Inline Liquid badge injectors |
| Analytics | GA4, Segment (script tags) | Triple Whale (SSR wrapper needed) | Legacy jQuery-based trackers |
Migration Strategies
1. Prefer API/SDK Apps
Apps exposing REST/GraphQL endpoints or React SDKs are safest. Example:
import { YotpoReviews } from "@yotpo/react"; <YotpoReviews productId={product.id} />;
2. Use Wrappers for DOM/SSR
For apps expecting DOM nodes or Liquid sections, build Hydrogen wrappers:
<div id="judgeme_widget"> <JudgeMeEmbed productId={product.id} /> </div>
3. Replace Legacy Liquid Apps
If an app only works via Liquid snippet injection, you’ll need to switch vendors or request API support.
4. Hybrid Builds as a Bridge
For must-have apps that break, consider keeping checkout/catalog in Liquid while Hydrogen handles landing pages and custom flows.
Business Impact: Hidden Migration Costs
- App swaps add unexpected licensing costs (e.g., replacing free Liquid apps with API-first SaaS).
- Developer time required for wrappers and re-integration.
- Merchant training for new workflows.
But long-term, Hydrogen + API-first apps = more stability, less fragility.
Best Practices
- ✅ Audit current apps before Hydrogen migration.
- ✅ Prioritize API-first or SDK-driven apps.
- ✅ Budget time for wrappers (especially reviews, loyalty).
- ✅ Work with vendors early → many are building Hydrogen support.
- ✅ Document compatibility in your project repo for future devs.
Conclusion
Hydrogen + Oxygen unlock modern Shopify development, but app compatibility is a real migration hurdle. Merchants that plan ahead — by auditing apps, choosing API-first partners, and bridging with hybrid builds — avoid painful surprises.
In Shopify’s future, app ecosystems will favor API-driven integrations, not Liquid snippets.