Headless Shopify: Wann es sich lohnt – und wann nicht

In einer klassischen Shopify-Architektur sind Frontend und Backend eng gekoppelt: Shopify liefert sowohl die Daten als auch das fertige HTML an den Browser. Dein Theme (Liquid) läuft auf Shopifys Servern und rendert die Seiten.

Headless trennt diese beiden Schichten:

• Backend: Shopify bleibt Datenquelle – Produkte, Bestellungen, Checkout, Zahlungen. Du nutzt die Shopify Storefront API (GraphQL) oder die Admin API, um auf diese Daten zuzugreifen.
  • Frontend: Ein separates, eigenständiges Projekt – gebaut mit React, Next.js, Nuxt, Astro oder einem beliebigen anderen Framework. Es fetcht die Daten von der API und rendert die UI selbst.

    Shopifys offizielle Headless-Lösung: Hydrogen Shopify bietet mit Hydrogen ein React-basiertes Framework speziell für Headless-Shopify-Projekte. Es baut auf Remix auf und ist auf Commerce-Use-Cases optimiert. Dazu kommt Oxygen als Hosting-Plattform direkt bei Shopify.

    Alternativer Stack: Viele Teams nutzen Next.js + Storefront API ohne Hydrogen – das ist flexibler, erfordert aber mehr eigene Entscheidungen.

Die Vorteile sind real – aber nicht alle gelten für jeden Shop gleichermaßen.

1. Performance (wenn richtig umgesetzt) Ein Headless-Frontend kann sehr schnelle Core Web Vitals erreichen – LCP unter 1,5 s ist möglich, wenn du statisches Pre-Rendering (SSG/ISR) für Produktseiten nutzt. Das ist schneller als typisches Liquid-Rendering.

Caveat: Schlechtes Headless kann auch langsamer sein als ein optimiertes Liquid-Theme. Performance kommt aus der Implementierung, nicht automatisch aus der Architektur.

2. Maximale Frontend-Freiheit Mit Headless kannst du jede beliebige UI bauen – ohne Liquid-Einschränkungen, ohne Theme-Struktur. Das ist wertvoll bei:

• Stark individualisierten Produktkonfiguratoren
  • Komplexen Animationen und Interaktionen (GSAP, Three.js)
    • Tight Integration mit externen Design-Systemen

      3. Multi-Channel aus einer Quelle Du kannst dieselbe Shopify-Backend-Infrastruktur für Web-Shop, Mobile App und sogar Digital Signage nutzen. Shopify als Commerce-API für alle Channels.

      4. Technologie-Stack-Freiheit Dein Entwicklungsteam kann im bevorzugten Framework arbeiten. Das verbessert Produktivität und Recruiting – wenn deine Entwickler React kennen, aber kein Liquid.

Hier wird es in vielen Vergleichen unehrlich. Headless ist teurer – deutlich.

Entwicklungsaufwand:

• Klassisches Shopify-Theme customizing: 15–50 h für gute Anpassungen
  • Headless-Shopify-Projekt von Grund auf: 150–500 h je nach Umfang
    • Das bedeutet bei Tagessätzen ab 800 €: Mehrkosten von 50.000–250.000 € in der Erstentwicklung

      Laufende Wartung:

      • Shopify-Theme: Updates meist in wenigen Stunden; Shopify Themes sind rückwärtskompatibel
        • Headless: Framework-Updates (Next.js, React), Dependency-Management, Breaking Changes in der Storefront API – dieser Overhead ist dauerhaft

          Hosting:

          • Oxygen (Shopify): Inkludiert in Shopify Advanced/Plus, sonst extra
            • Vercel/Netlify: 0–500 €/Monat je nach Traffic
              • Eigenes Hosting: Wartungsaufwand dazu

                Shopify Checkout bleibt Standard: Headless ändert nichts am Checkout. Du leitest am Ende auf den Shopify-Checkout weiter. Das bedeutet: Checkout-Styling und -Logik sind weiterhin Shopify-Liquid – außer du bist auf Plus-Plan.

                Realistisches Mindestbudget für ein sinnvolles Headless-Projekt: 40.000–60.000 € Entwicklung + laufende Wartung.

Nach allem was ich gesagt habe: Wann ist es dann die richtige Wahl?

Szenario 1: Custom UX, die mit Liquid nicht realisierbar ist Du willst einen komplexen 3D-Produktkonfigurator, eine vollständig animierte Custom-Experience oder eine PWA mit Offline-Funktionalität. Das ist mit Standard-Shopify-Themes nicht sauber umsetzbar.

Szenario 2: Multi-Channel-Commerce mit Shopify als Backend Du betreibst einen Webshop, eine native App und vielleicht digitale Kiosk-Systeme. Shopify als zentrale Commerce-API mit Headless-Frontends für jeden Channel ist dann ein eleganter Ansatz.

Szenario 3: Bestehendes Entwicklungsteam mit React/Next.js-Erfahrung Wenn dein Team sowieso in React arbeitet und kein Liquid lernen soll, kann Headless die bessere Option sein. Der Lernkurven-Overhead ist geringer als Liquid für ein React-Team.

Szenario 4: Performance-kritischer High-Traffic-Shop Bei sehr hohem organischem Traffic und SEO-Konkurrenz, wo 0,2 s LCP-Unterschied Rankings beeinflusst, kann Headless + statisches Rendering den Unterschied machen.

Gemeinsamer Nenner dieser Szenarien: Du hast bereits ein Shopify Plus-Budget (oder kommst da in den nächsten 12 Monaten hin), ein technisches Team und einen konkreten Grund, warum Standard-Shopify nicht ausreicht.

Das ist die ehrliche Gegenperspektive, die viele Agenturen dir nicht sagen – weil sie mit Headless-Projekten mehr verdienen.

Ein professionell konfiguriertes und optimiertes Shopify-Theme (z. B. Dawn, Impulse, Prestige) kann:

• LCP-Werte unter 2,5 s erreichen (Google-Richtwert "gut")
  • Mobile-First-Performance liefern
    • Alle Standard-E-Commerce-Anforderungen abdecken
      • Mit dem App Store Lücken schließen

        Du brauchst kein Headless, wenn:

        • Dein primäres Ziel ist ein funktionaler, schneller Shop ohne extreme UI-Individualität
          • Du oder dein Team kein tiefes React/Next.js-Know-how haben
            • Dein Jahresumsatz unter 2–3 Mio. € liegt und kein klarer Headless-Bedarf besteht
              • Du Entwicklungsbudget lieber in Marketing, Conversion-Optimierung oder Produkterweiterungen steckst

                Ein gut gebautes Theme kann messbar besser performen als ein schlecht umgesetztes Headless-Projekt. Architektur-Entscheidungen sind kein Qualitätsmerkmal per se.

Wenn du Headless baust, stehst du vor einer weiteren Entscheidung.

Shopify Hydrogen:

• Gebaut auf Remix (React)
  • Fertige Commerce-Primitives (Cart, Product, Collection)
    • Hosting via Oxygen (Shopify-native)
      • Gut gepflegt und von Shopify direkt supported
        • Nachteil: Remix-Ökosystem ist kleiner als Next.js; mehr Vendor-Bindung

          Next.js + Storefront API:

          • Größte React-Community, riesiges Ökosystem
            • Maximale Flexibilität bei Hosting und Architektur (Vercel, AWS, Cloudflare)
              • Shopify-Integration muss selbst aufgebaut werden (oder via @shopify/hydrogen-react als Library)
                • Nachteil: Mehr Eigenarbeit bei Commerce-Logik

                  Meine Einschätzung:

                  • Neues Projekt, Shopify Plus, will bei Shopify-Ökosystem bleiben → Hydrogen
                    • Bestehendes Next.js-Team, komplexe eigene Anforderungen, flexibles Hosting → Next.js + Storefront API
                      • Kleines Team, keine starke React-Erfahrung → Beides nicht empfehlenswert, erst Theme optimieren

Zur Veranschaulichung ein realistisches technisches Setup:

Frontend: Next.js 14+ (App Router)
Data Fetching: Shopify Storefront API (GraphQL)
Hosting: Vercel
Checkout: Shopify Checkout (Redirect)
Cart: Client-seitig mit Shopify Cart API
Typische Shopify API Queries:
productByHandle: Produktdetailseite
collection: Kategorienseite (statisch generiert via getStaticPaths)
cart: Warenkorb-State
Authentifizierung für Members: Shopify Customer Account API
(neu, gibt erstmals echten Headless-Kunden-Login)

Dieses Setup ist produktionsreif, aber bevor du damit anfängst: Setz dir ein klares Ziel. Was soll Headless für dich lösen, das Standard-Shopify nicht kann? Wenn du keine klare Antwort hast, lohnt sich die Investition wahrscheinlich nicht.

Headless Shopify ist kein Hype-Trend, aber auch kein Allheilmittel.

Es lohnt sich, wenn:

• Du konkrete Anforderungen hast, die Liquid nicht erfüllt
  • Du ein Budget und ein Team für Aufbau und Betrieb hast
    • Multi-Channel oder extreme Performance-Ziele ein echter Business Case sind

      Es lohnt sich nicht, wenn:

      • Dein primäres Ziel ist ein guter Shop – dafür reicht ein optimiertes Theme
        • Du Entwicklungsbudget lieber in Traffic und Conversion steckst
          • Du kein Team für dauerhafte Wartung hast

            Ich begleite Shopify-Projekte vom Theme-Customizing bis zur Custom-App- und Headless-Entwicklung – je nachdem, was dein konkreter Fall braucht. Kein Standardpaket, sondern eine ehrliche Analyse.

            [Shopify Custom-Entwicklung anfragen](/lp/shopify-app-entwicklung)