Mind the Gap: Shopify Apps That Break in Hydrogen

By nuwudorder | September 23, 2025

Introduction

Hydrogen storefronts unlock speed, flexibility, and headless innovation. But there’s a catch: many legacy Shopify apps don’t work out-of-the-box.

Apps built for Liquid themes often rely on DOM injection or script tags — which fail in Hydrogen’s React + API-first environment. This post explores the gaps and how to bridge them.

Why Some Apps Break

  • ❌ DOM injection → upsells, pop-ups, and review widgets expect <script> injection into Liquid templates.
  • ❌ Theme extension assumptions → no section schema in Hydrogen.
  • ❌ Client-side dependencies → apps assume synchronous DOM, not streaming SSR.
  • ❌ Checkout limitations → checkout.liquid customizations don’t apply to headless.

👉 Hydrogen changes the rules — apps must adapt to APIs.

Categories Most Affected

  1. Reviews (Yotpo, Judge.me, Okendo)
    • Rely on DOM widgets.
    • Fix: use API/SDK → render reviews as React components.
  2. Loyalty (Smile.io, Yotpo Loyalty)
    • DOM pop-ups fail.
    • Fix: direct API integration + custom UI.
  3. Subscriptions (Recharge, Skio)
    • Better → SDK/API integration, but some Liquid reliance remains.
  4. Analytics + Personalization
    • DOM-based tracking breaks in SSR.
    • Fix: server-side events + edge-safe SDKs.

Workarounds

  • SDK Integrations → use app APIs directly in Hydrogen loaders/components.
  • Wrapper Components → create React components that replicate widget logic.
  • Hybrid Builds → keep some theme-based features in Liquid while migrating.
  • Agency Playbooks → maintain “compatibility matrices” for app categories.

Case Example: Beauty Brand Migration

  • Migrated from Liquid → Hydrogen.
  • Lost 5 apps on day one (reviews, loyalty, pop-ups).
  • Agency replaced with API-first integrations + React wrappers.
  • Result: faster load times, more control, +8% conversion rate.

Guardrails

  • ✅ Audit app stack before migrating to Hydrogen.
  • ✅ Replace DOM-injection apps with API-first integrations.
  • ✅ Build React wrappers for must-have features.
  • ✅ Maintain a living compatibility matrix per client.

Conclusion

Hydrogen isn’t a 1:1 swap for Liquid. Apps that depend on DOM injection or theme extensions will break. Agencies and merchants must plan migrations carefully, replacing fragile integrations with API-first solutions.

If it can’t talk API, it won’t thrive in Hydrogen.

Posted in Blog

About nuwudorder