Glossar · H

Headless Commerce.

Headless Commerce ist eine Shop-Architektur, bei der die sichtbare Oberfläche (das Frontend) vom Shopsystem im Hintergrund (Produkte, Warenkorb, Zahlung, Bestellungen) getrennt ist. Beide sprechen über eine API miteinander, sodass die Oberfläche frei gestaltet und mit beliebiger Technik gebaut werden kann.

Headless Commerce — ausführlich erklärt

Ein klassischer Online-Shop ist ein Paket: Das Shopsystem verwaltet Produkte und Bestellungen und liefert zugleich die Seiten aus, die Kunden sehen, meist über ein Theme. Bei Headless Commerce wird dieser «Kopf» abgetrennt. Das Shopsystem bleibt für Katalog, Preise, Lager, Warenkorb, Checkout und Bestellabwicklung zuständig, die Oberfläche ist eine eigene Anwendung, die ihre Daten über eine API holt. Das Prinzip ist dasselbe wie bei der Headless-Architektur und beim Headless CMS, angewendet auf den Verkauf.

Bekannte Shopsysteme bieten dafür eigene Schnittstellen an, bei Shopify etwa die Storefront API und das Framework Hydrogen. Das Frontend wird häufig mit einem modernen Framework wie Next.js gebaut und vorgerendert ausgeliefert. Inhalte wie Ratgeber, Lookbooks oder Landingpages kommen oft aus einem Headless CMS, Produkte und Preise aus dem Shopsystem. Die Oberfläche fügt beides zusammen.

Die Vorteile liegen in Gestaltungsfreiheit, Ladezeit und Mehrkanalfähigkeit. Produktpräsentationen, Konfiguratoren oder Animationen sind nicht an die Grenzen eines Themes gebunden. Gut gebaute Headless-Frontends laden sehr schnell, was Nutzererlebnis und Conversion-Rate zugutekommt. Und dieselben Produktdaten lassen sich in Website, App, Kiosk-Bildschirm oder für KI-Agenten bereitstellen, was mit Agentic Commerce an Bedeutung gewinnt.

Die Nachteile sind ebenso real. Ein Headless-Shop ist ein Softwareprojekt, kein Theme-Austausch: Er braucht Entwicklung, Hosting für das Frontend und laufende Pflege. Viele Apps und Erweiterungen des Shopsystems, die sich in ein Theme einklinken, funktionieren im eigenen Frontend nicht ohne Weiteres und müssen nachgebaut oder über ihre API angebunden werden. Fachpersonen im Marketing können Seiten nicht mehr im gewohnten Theme-Editor ändern, wenn kein CMS mitgeplant wird. Für viele kleinere Shops ist ein gut umgesetztes Theme deshalb die bessere Wahl.

Wann sich Headless Commerce lohnt

Headless lohnt sich, wenn die Präsentation ein zentrales Verkaufsargument ist und ein Theme dafür nicht reicht, wenn Inhalte und Produkte eng verwoben werden sollen, wenn mehrere Kanäle aus denselben Daten bedient werden oder wenn Ladezeit und Gestaltung trotz Optimierung des Themes nicht genügen. Auch Shops mit sehr eigenen Abläufen, etwa Konfiguration nach Mass, profitieren davon.

Nicht lohnend ist Headless, wenn das Sortiment klassisch ist, das Budget knapp, kein Team für die laufende Pflege bereitsteht oder der Shop stark auf Apps aus dem Ökosystem angewiesen ist. Dann bringt ein sauber gebautes Theme mit guter Bildoptimierung meist mehr für weniger Aufwand. Eine Zwischenlösung ist, den Checkout im Shopsystem zu belassen und nur einzelne Seiten wie Startseite und Kampagnen frei zu bauen.

Beispiel: Ein Möbelshop mit Konfigurator

Ein Beispiel: Ein Schweizer Möbelhersteller verkauft Tische in vielen Massen, Holzarten und Oberflächen. Im Standard-Theme lässt sich das nur als lange Variantenliste abbilden, und eine Vorschau des konfigurierten Tisches fehlt. Mit Headless Commerce bleibt das Shopsystem für Preise, Lager, Zahlung und Bestellungen zuständig, während ein eigenes Frontend den Konfigurator mit Live-Vorschau und Preisberechnung zeigt und das Ergebnis als Warenkorb an das Shopsystem übergibt.

Ratgeberinhalte zu Holzpflege und Massen kommen aus einem CMS und verlinken direkt in passende Konfigurationen. Der Aufwand ist deutlich höher als bei einem Theme, dafür entsteht ein Einkaufserlebnis, das sich mit Standardmitteln nicht bauen liesse. Wie wir Shops planen, beschreiben die Seiten Shopify-Agentur Schweiz und E-Commerce-Agentur.

Weiterführende Seite

Headless Architecture

Häufige Fragen zu Headless Commerce

Es kann deutlich schneller sein, weil das Frontend frei optimiert und vorgerendert wird. Automatisch ist das aber nicht: Ein schlecht gebautes Headless-Frontend kann langsamer sein als ein gutes Theme. Entscheidend ist die Umsetzung, nicht die Architektur allein.

Ja. Shopify bietet mit der Storefront API und dem Framework Hydrogen offizielle Wege, ein eigenes Frontend zu bauen. Katalog, Checkout, Zahlungen und Bestellverwaltung bleiben bei Shopify. Zu prüfen ist, welche installierten Apps im eigenen Frontend weiter funktionieren.

Es kann sehr gut für SEO sein, wenn die Seiten serverseitig oder statisch gerendert werden, sauberes HTML, strukturierte Daten und schnelle Ladezeiten liefern. Ein Frontend, das Inhalte nur im Browser per JavaScript nachlädt, schadet dagegen. Die SEO-Anforderungen gehören deshalb von Anfang an ins Konzept.

Bereit für Ihr Projekt?

Wenden Sie dieses Wissen auf Ihre Website an — DLM Digital hilft Ihnen dabei.

Kosten berechnen Alle Begriffe

Headless Commerce in der Praxis

Wie der Begriff im Alltag von Schweizer KMU auftaucht — vertieft in Artikeln aus dem DLM Magazin.

Hosting & Infrastruktur · 12 Min.Hosting-Kosten im Vergleich: was Schweizer KMU für welche Architektur zahlenShared Hosting, eigener Server, Managed-Plattform oder Auslieferung am Edge: Die vier gängigen Architekturen unterscheiden sich weniger im Monatspreis als darin, wo die Kosten aus dem Ruder laufen. Ein nüchterner Vergleich mit belegten Listenpreisen, einer durchgerechneten Firmenwebsite und den Stellen, an denen die Rechnung kippt.Digital Business · 10 Min.Onlineshop erstellen in der Schweiz: Shopify, WooCommerce oder individuellWelches Shopsystem passt, entscheidet sich in der Schweiz weniger an Designvorlagen als an TWINT, Franken-Preisen inklusive MWST, Versand und der Frage, wer den Shop in drei Jahren noch pflegt. Eine Entscheidungshilfe mit geprüften Preisen und unserer eigenen Shopify-Referenz.Digital Business · 9 Min.Google Shopping für Schweizer Shops: Merchant Center richtig einrichtenOhne Merchant Center erscheinen eure Produkte weder in den kostenlosen Produkteinträgen noch in Shopping-Anzeigen. Was ein Schweizer Shop im Feed angeben muss, warum Preise inklusive MWST stehen müssen, was ein Preisvergleichsportal mit euren Klickkosten zu tun hat und woran Produkte am häufigsten scheitern.

Alle Artikel im Magazin