Which Shopify Apps Survive Hydrogen Migration?

Introduction

Hydrogen storefronts give merchants the flexibility of React and edge performance on Oxygen. But there’s a catch: not all Shopify apps are compatible.

Many apps were built for Liquid themes and rely on DOM injection or section snippets. In Hydrogen, those assumptions break. This post outlines which app categories work out-of-the-box, which need wrappers, and which fail entirely.

Category 1: API-First Apps (Safe)

✅ These apps expose GraphQL/REST APIs or SDKs.

• Subscriptions (Recharge, Skio).
• Loyalty (Yotpo Loyalty, Smile.io).
• Search/personalization (Algolia, Constructor.io).

👉 Direct integrations with Hydrogen loaders and React components.

Category 2: Needs Wrappers

⚠️ These apps assume Liquid DOM but expose APIs under the hood.

• Reviews (Yotpo, Judge.me).
• Wishlists (many inject Liquid snippets).
• Analytics SDKs (require API proxying).

👉 Fix: Build React wrappers or proxy calls through serverless functions.

function ReviewsWidget({ productId }) { const [reviews, setReviews] = useState([]); useEffect(() => { fetch(`/api/reviews?product=${productId}`) .then(res => res.json()) .then(setReviews); }, [productId]); return <ReviewsList reviews={reviews} />; }

Category 3: Breaks in Hydrogen

❌ Apps that rely on DOM injection or section templates.

• Pop-ups / upsells using “insert after </body>.”
• Theme extensions that assume Liquid sections.
• Hard-coded analytics snippets.

👉 Solution: Replace with API-first equivalents or custom components.

Compatibility Matrix

App Category	Works OOTB	Needs Wrappers	Breaks
Subscriptions	✅	—	—
Loyalty	✅	—	—
Reviews	—	⚠️	—
Wishlists	—	⚠️	—
Pop-ups / DOM hacks	—	—	❌
Personalization	✅	—	—

Agency Best Practices

• ✅ Audit app stack before migration.
• ✅ Ask vendors if Hydrogen support exists.
• ✅ Replace DOM-injection apps early in project.
• ✅ Maintain a living compatibility matrix for teams + clients.

Case Example: DTC Brand Migration

• Legacy Liquid store → 15 apps.
• On Hydrogen:
  • 9 worked OOTB.
  • 4 needed wrappers (reviews, wishlist, analytics).
  • 2 failed (pop-ups, hard-coded upsell).
• Outcome: Leaner stack, faster PDP performance, higher Lighthouse scores.

Conclusion

Hydrogen breaks the assumption that “any app works.” Merchants and agencies need to map app stacks, identify risks, and replace or wrap as needed.

In Hydrogen, compatibility is engineered — not assumed.