Du möchtest einen Onlineshop gestalterisch freier aufbauen, ohne Produkte, Bestellungen und Bezahlung neu zu entwickeln? Eine mögliche Architektur lautet: Astro für die Website und Shopify für den Commerce-Teil. Das ist Headless Commerce. Es bietet Flexibilität, verschiebt aber auch Aufgaben vom fertigen Shopify-Theme in deine eigene Anwendung.
Welche Aufgabe übernimmt welches System?
| Aufgabe | Astro | Shopify |
|---|---|---|
| Seitenaufbau, Layout und Content | Ja | Optional |
| Produktdaten bereitstellen | API abrufen | Zentrale Verwaltung |
| Produktvarianten und Verfügbarkeit | Anzeigen | Datenquelle |
| Warenkorb-Interaktion | Frontend entwickeln | Cart API |
| Bezahlung | Checkout öffnen | Checkout und Zahlungsabwicklung |
| SEO-Metadaten, Canonicals, Sitemap | Eigene Umsetzung | Nicht automatisch im Astro-Frontend |
Mit der Shopify Storefront API lässt sich Commerce in andere Frontends integrieren. Die aktuelle API-Version zum Veröffentlichungszeitpunkt dieses Beitrags ist 2026-10. Für Warenkörbe verwendest du Cart-Mutationen und leitest anschließend über die zurückgegebene Checkout-URL zum Shopify-Checkout weiter.
Zwei Wege zu einer Headless-Architektur
Variante A: Statisch generierte Produktseiten
Astro lädt Produkte beim Build und erstellt fertiges HTML. Das ist besonders für kleinere, kuratierte Sortimente interessant. Produkttexte und Bilder sind direkt im HTML verfügbar. Preis- und Bestandsdaten können jedoch zwischen zwei Builds veralten.
Deshalb gilt: Preise und Verfügbarkeit vor Kaufentscheidungen erneut live prüfen. Baue eine klare Aktualisierungsstrategie ein, wenn dein Shop häufig Produkte ändert.
Variante B: Dynamisch abgerufene Commerce-Daten
Astro kann statische Inhaltsseiten liefern, während einzelne Commerce-Funktionen dynamisch nachladen. So bleiben Artikel, Beratung und Landingpages schlank. Für Produktvarianten, Mengen und Warenkorb kommt gezielt JavaScript zum Einsatz.
Der Kompromiss: Die Schnittstelle muss Ausfälle, Netzwerklatenz, API-Fehler und Zustandsänderungen sauber behandeln. Ein Headless-Shop ist also nicht automatisch schneller als ein gut optimiertes Shopify-Theme.
Beispiel: Eine Produktabfrage vorbereiten
In der Storefront API werden GraphQL-Abfragen verwendet. Die folgende Abfrage zeigt das Prinzip für eine kleine Produktliste:
query Products {
products(first: 6) {
nodes {
id
handle
title
featuredImage {
url
altText
}
}
}
}Ein öffentlicher Storefront-Token kann für geeignete browserseitige Anfragen verwendet werden. Ein privater Storefront-Token gehört dagegen ausschließlich in die Serverumgebung und niemals ins ausgelieferte JavaScript. Fordere nur die Berechtigungen an, die deine Integration benötigt. Details stehen in der API-Dokumentation.
Warenkorb und Checkout anbinden
Ein robuster Ablauf sieht so aus:
- Kunde wählt eine konkrete Produktvariante und Menge.
- Die Anwendung erstellt oder aktualisiert einen Cart über die Storefront API.
- Sie verarbeitet Fehlermeldungen, Verfügbarkeit und aktuelle Preise.
- Zum Bezahlen öffnet sie die von Shopify gelieferte checkoutUrl.
- Der Checkout und die Zahlungsabwicklung bleiben im Shopify-System.
Wichtig: Einen Cart nicht als verbindliche Preiszusage behandeln. Rabatte, Steuern, Versand und Verfügbarkeit können sich vor Abschluss verändern. Sieh dir dazu die Cart-Anleitung von Shopify an.
Technisches SEO: Was du selbst lösen musst
Bei Headless verschwindet die SEO-Verantwortung nicht – sie liegt stärker beim Frontend. Kontrolliere insbesondere:
- Eindeutige URLs und Canonicals für Produkte, Collections und redaktionelle Seiten.
- Fertiges, crawlbares HTML für relevante Inhalte und interne Links.
- Strukturierte Daten für Produkte nur mit tatsächlich sichtbaren und aktuellen Angaben.
- XML-Sitemap mit den richtigen kanonischen URLs.
- Fehlerseiten und Weiterleitungen für entfernte Produkte und geänderte Handles.
- Core Web Vitals mit echten Felddaten statt ausschließlich Labormessungen.
Für die technischen Grundlagen lies auch JSON-LD prüfen und den kostenlosen SEO-Check.
Wann lohnt sich Shopify + Astro?
Headless kann sinnvoll sein, wenn das Projekt ein eigenes redaktionelles Konzept, besondere Interaktionen oder die Kombination einer umfangreichen Firmenwebsite mit ausgewählten Produkten benötigt. Für einen normalen Shop ohne spezielle Anforderungen ist ein sauber entwickeltes Shopify-Theme oft die wirtschaftlichere Lösung: weniger eigener Checkout-Glue-Code, weniger Wartung und kürzere Projektlaufzeit.
Meine Empfehlung für die Planung: Zuerst Produktanzahl, Änderungsfrequenz, Varianten, internationale Märkte, Redaktionsprozess und Budget dokumentieren. Danach entscheiden, ob ein reguläres Shopify-Theme oder Headless die Anforderungen einfacher erfüllt.
Quellen
Du planst einen Shop mit individuellem Frontend? Unter Shopify-Webdesign findest du den Einstieg in die gemeinsame technische Planung.
War dieser Artikel hilfreich?
Dein Feedback hilft uns, unsere Ratgeber zu verbessern.
Mit Digitalhaus Kunze gearbeitet?
Dann freuen wir uns über deine ehrliche Erfahrung auf Google – unabhängig davon, ob sie positiv oder kritisch war.
Auf Google bewerten