Shopify ist mit Abstand das einfachste System, um schnell einen professionellen Onlineshop aufzusetzen. Mit ein paar Klicks steht das Theme, die Zahlungsabwicklung läuft und Produkte sind eingepflegt. Aber: Wer Shopify wirklich ausreizen will, stößt irgendwann an die Grenzen der Theme-Architektur.
Dann kommt der Gedanke: Shopify Headless mit Next.js. Klingt nach Tech-Magie – und genau das ist es teilweise. In diesem Artikel zeigen wir, wann sich der Aufwand wirklich rechnet.
Inhaltsverzeichnis
1. Was bedeutet „Headless Shopify" überhaupt?
Klassisch besteht Shopify aus zwei Teilen, die fest verbunden sind: dem Backend (Produktverwaltung, Bestellung, Zahlung) und dem Frontend (das Theme, das der Kunde im Browser sieht). Mit Liquid als Template-Sprache.
Bei einem Headless-Setup trennst du diese beiden Welten: Shopify bleibt das Backend mit allen Vorteilen (Checkout, Payment, Inventory), aber das Frontend baust du komplett selbst – z. B. mit Next.js. Die Verbindung läuft über die Shopify Storefront API.
2. Die echten Vorteile eines Headless-Setups
Performance
Next.js liefert statisch gerenderte Seiten mit Inkremental Static Regeneration (ISR). Lighthouse-Scores von 95+ sind realistisch – Shopify-Themes erreichen das selten ohne starkes Tuning. Schnellere Seiten = bessere Conversion + besseres SEO.
Volle Design-Freiheit
Im klassischen Theme-Korsett bist du an die Bausteine gebunden. Headless erlaubt komplett individuelle Layouts, Animationen, Konfiguratoren, AR-Produktansichten – alles, was im Web möglich ist.
Content-Hub-Fähigkeit
Du kannst Inhalte aus mehreren Quellen mischen: Shopify für Produkte, Strapi für Blog/Magazin, Sanity für Editorial. Alles auf einer URL, ohne Kompromisse.
SEO-Kontrolle
Strukturierte Daten (Schema.org), saubere Meta-Tags, Server-Side Rendering, granulare Sitemap-Steuerung – alles in deiner Hand statt in den Händen des Theme-Anbieters.
3. Die Nachteile, die niemand offen sagt
Headless ist kein Allheilmittel. Was du dir damit einkaufst:
- Höhere Initialkosten: 10.000 bis 40.000 €, je nach Design, Funktionen und Shopify-Anbindung, statt 2.000 bis 8.000 € für ein Theme
- Höhere laufende Kosten: Du brauchst Hosting (Vercel, Netlify, eigener Server) zusätzlich zu Shopify
- Komplexere Wartung: Updates an Storefront API, Next.js und Dependencies. Nichts geschieht automatisch wie bei Theme-Updates.
- Verlust einiger Shopify-Apps: Apps, die Liquid-Templates erweitern, funktionieren im Headless nicht out-of-the-box
- Checkout bleibt Shopify-gehostet: Du kannst den Checkout customizen, aber nicht komplett neu bauen (außerhalb von Shopify Plus)
4. Wann lohnt sich Headless Shopify?
Headless lohnt sich nicht erst ab einer festen Umsatzgrenze. Umsatz ist ein guter Indikator, aber nicht das einzige Kriterium. Entscheidend ist, ob dein Shop Anforderungen hat, die ein klassisches Theme nur schwer sauber abbilden kann.
Klassisches Theme reicht oft aus
Wenn dein Shop noch klein ist, das Sortiment überschaubar bleibt und Design sowie Funktionen nah am Shopify-Standard liegen, ist ein gutes Theme oft der beste Startpunkt. Das Budget ist dann meist besser in saubere Produktdaten, Conversion-Optimierung und Content investiert.
Theme + Customizing als Zwischenstufe
Für viele wachsende Shops ist ein optimiertes Theme mit gezielten Custom-Sections der sinnvollste nächste Schritt. Headless wird interessant, wenn Branding, Performance, Landingpages, Content-Commerce oder besondere Produktlogik eine zentrale Rolle spielen.
Ab etwa 500.000 € Jahresumsatz wird der Business Case leichter messbar
Ab dieser Größenordnung machen sich Verbesserungen bei Ladezeit, Conversion und Customer Experience oft schneller bemerkbar. Eine Conversion-Rate-Steigerung von 0,5 Prozentpunkten bedeutet bei 500.000 € Umsatz ein Plus von 25.000 € pro Jahr.
Internationale, mehrsprachige Shops, Konfiguratoren oder B2B-Plattformen
Hier kann Headless auch deutlich früher sinnvoll sein. Themes stoßen an Grenzen, sobald Anforderungen an Content, Produktlogik, Performance oder Systemintegrationen komplex werden.
5. Tech-Stack: Next.js + Shopify Storefront API
Unser Setup für Headless Shopify bei DigitalMoonrise:
- Frontend: Next.js mit App Router und React Server Components
- Backend: Shopify (Plan: Standard oder Advanced, kein Headless-Plan nötig)
- API: Shopify Storefront API (GraphQL)
- CMS für Content: Strapi (Blog, Landingpages, Editorial)
- Hosting: Vercel oder eigener Server (Docker)
- Bilder: Next.js Image Optimization + Shopify CDN
Die Storefront API erlaubt es uns, Produkte, Kollektionen und Cart-Funktionen direkt in Next.js zu nutzen. Der Checkout wird per Redirect zu Shopify übergeben – sicher, PCI-konform, ohne eigene Zahlungsabwicklung.
6. Fazit & Empfehlung
Headless Shopify ist kein Tech-Selbstzweck. Es löst echte Probleme, wenn Anforderungen und Business Case zusammenpassen. Für viele Shops ist ein optimiertes Theme der richtige Start. Headless lohnt sich, wenn Branding, Performance, Content-Commerce, internationale Märkte oder individuelle Produktlogik wichtiger werden.
Du bist unsicher, ob dein Shop reif für Headless ist? Lass uns 30 Minuten reden – wir geben dir eine ehrliche Einschätzung anhand deiner Zahlen.