Skip to main content
SkandikaPart 1

Headless Commerce für Skandika: Shopware, Strapi und Next.js im Zusammenspiel

Die Ausgangslage

Skandika ist ein etablierter Outdoor- und Fitness-Ausrüster aus Essen. Zelte für Familiencamping, Rudergeräte fürs Homeoffice, Schlafsäcke für jedes Wetter — das Sortiment ist breit, die Kundschaft anspruchsvoll. Der Online-Shop musste mitziehen.

Die Anforderungen:

  • Drei Sprachen — Deutsch, Englisch, Französisch — aus einer Codebasis
  • Schnelle Ladezeiten — Server-Side Rendering für SEO und Performance
  • Flexible Inhalte — Marketing-Team soll Landingpages, Banner und Aktionen selbst pflegen können, ohne Entwickler zu fragen
  • Shopware als Backend — bestehender Produktkatalog, Bestellwesen und ERP-Anbindung bleiben

Die Architektur: Best-of-Breed statt Monolith

Statt alles in einem System zu lösen, haben wir die Stärken spezialisierter Tools kombiniert:

KomponenteTechnologie
Produktkatalog, Warenkorb, CheckoutShopware 6.6
Content-Management (Landingpages, Banner, SEO-Texte)Strapi (Headless CMS)
Frontend und SSRNext.js mit React
SucheMeilisearch
InfrastrukturHetzner Cloud, K3s Kubernetes, ArgoCD
DatenbankPercona XtraDB Cluster (MySQL 8 HA)
CachingValkey (Redis)
ZahlungenMollie, PayPal

Warum Headless?

In einem klassischen Shop-System (Shopware-Frontend, WooCommerce, Shopify) kontrolliert das Backend, wie die Seite aussieht. Das bedeutet: jede Design-Änderung muss durch das Shop-System. Jedes Feature ist an Plugin-Verfügbarkeit gebunden. Performance ist limitiert durch die Template-Engine.

Mit einem Headless-Ansatz trennen wir:

  • Shopware kümmert sich um das, was es am besten kann: Produkte, Preise, Bestellungen, Lager
  • Strapi gibt dem Marketing-Team ein modernes CMS für alle Inhalte
  • Next.js rendert die Seiten serverseitig — schnell, SEO-optimiert und ohne Kompromisse beim Design

Die harten Probleme

Authentifizierung: Clerk trifft Shopware

Eine der kniffligsten Architekturentscheidungen: Wie verbindet man ein modernes Auth-System (Clerk) mit Shopware, das eigene Session-Verwaltung hat? Unsere Lösung: ein Guest-Account-Impersonation-Flow, bei dem Clerk die Authentifizierung übernimmt und im Hintergrund Shopware-Guest-Sessions verwaltet. Das Ergebnis: Nutzer erleben ein nahtloses Login — während im Backend zwei Systeme sauber miteinander kommunizieren.

Content-Autonomie: Der komponentenbasierte Page Builder

"Marketing pflegt Inhalte selbst" klingt einfach — in der Praxis ist es ein Architekturproblem. Wir haben in Strapi ein komponentenbasiertes Seitensystem gebaut: Das Marketing-Team kombiniert vorgefertigte Bausteine (Hero-Banner, Produktgrids, Text-Bild-Blöcke, Aktions-Counter) zu kompletten Landingpages — ohne eine Zeile Code. Neue Kampagne? Neue Seite bauen, Komponenten zusammenstellen, veröffentlichen. Kein Ticket, kein Deployment.

Was wir gebaut haben

Mehrsprachiger Shop mit Übersetzungs-Pipeline

Ein Shop, drei Märkte. Über Lingui und eine integrierte POEditor-Anbindung wechseln Kunden zwischen Deutsch, Englisch und Französisch — inklusive lokalisierter Produktbeschreibungen, Kategorie-Seiten und Marketing-Inhalte. Neue Übersetzungen werden zentral gepflegt und automatisch in den Build-Prozess integriert.

Meilisearch: Produktsuche in Millisekunden

Statt der Standard-Shopware-Suche setzen wir Meilisearch ein — eine dedizierte Suchmaschine, die den gesamten Produktkatalog über Strapi indiziert. Ergebnisse in Millisekunden, Tippfehler-tolerant, mit Filtern und Facetten. Der Unterschied zwischen "Suche funktioniert" und "Suche, die Kunden tatsächlich benutzen."

Custom Checkout mit ERP-gestützter Versandlogik

Der Checkout ist das Herzstück jedes Shops — und bei Skandika alles andere als Standard. Wir haben einen vollständig eigenen Checkout-Flow gebaut:

  • Google Places Integration — Adressvalidierung in Echtzeit. Kunden tippen los, Google schlägt vor, Tippfehler und ungültige Adressen werden sofort erkannt
  • ERP-basierte Versandoptionen — Die verfügbaren Lieferarten werden dynamisch aus ShippingClasses berechnet, die aus dem ERP kommen. Nicht jedes Produkt kann überall hin versendet werden (B-Stock z.B. nicht ins Ausland), und nicht jede Versandart ist für jede Bestellung verfügbar. Das System entscheidet automatisch
  • Mehrstufiger Flow — Adresse, Versand, Zahlung — jeder Schritt validiert, bevor der nächste freigeschaltet wird

Shopware Clean Core: Updates ohne Schmerzen

Ein entscheidender Architektur-Grundsatz: Shopware bleibt auf Clean Core. Keine Plugins, keine Core-Modifikationen, keine Custom-Entities im Shopware-Backend. Alles, was über Standard-Commerce hinausgeht, liegt im Frontend oder in Strapi.

Warum das wichtig ist: Shopware-Updates sind dadurch einfach und kostengünstig. Kein Plugin-Kompatibilitäts-Roulette, keine Breaking Changes durch Drittanbieter, kein wochenlanges Testen nach jedem Minor-Update. Das spart dem Kunden langfristig tausende Euro an Wartungskosten.

Commerce-Komponenten

Für den Shop haben wir eine Bibliothek wiederverwendbarer UI-Komponenten gebaut — auf Basis von Radix UI für Barrierefreiheit:

  • Produktkarten mit Varianten, Preisvergleichen und "In den Warenkorb"
  • Kategorie-Seiten mit Filtern, Sortierung und über Strapi konfigurierbaren Content-Komponenten — Marketing kann pro Kategorie eigene Inhaltsblöcke einbauen
  • Produktvergleich — bis zu vier Produkte nebeneinander mit allen technischen Spezifikationen
  • B-Stock/Second-Chance-Bereich — Retouren-Verkauf mit eigener Versandlogik und länderspezifischen Einschränkungen

Selbst gehostete Infrastruktur

Die gesamte Plattform läuft auf unserer eigenen Kubernetes-Infrastruktur — kein AWS, kein verwalteter Cloud-Service:

  • K3s-Cluster auf Hetzner Cloud — volle Kontrolle über Compute, Netzwerk und Kosten
  • Percona XtraDB Cluster — MySQL 8 mit 3-Node High Availability, kein Single Point of Failure
  • ArgoCD — GitOps-basiertes Continuous Deployment. Code auf main = automatisches Deployment
  • Valkey (Redis) — Caching und Session-Management für schnelle Antwortzeiten
  • End-to-End Error Tracking — vom Client-Side-Frontend über die API bis zur Datenbank. Fehler werden erkannt, bevor Kunden sie bemerken
  • Automatisierte SSL-Zertifikate — via cert-manager und Let's Encrypt
  • Monitoring — Prometheus, Grafana und Loki für Metriken, Dashboards und Log-Aggregation

Warum selbst gehostet? Weil wir damit volle Kontrolle über Performance, Kosten und Datenhoheit behalten. Und weil wir die Infrastruktur aktiv betreuen — von K3s-Upgrades über Datenbank-Operationen bis Performance-Tuning.

Das Ergebnis

skandika.com ist heute eine performante, mehrsprachige E-Commerce-Plattform. Das Marketing-Team baut eigenständig Kampagnen-Seiten über den Strapi-Page-Builder. Shopware läuft auf Clean Core — Updates sind schnell und günstig. Und wir sorgen dafür, dass die Infrastruktur sauber läuft und die Plattform kontinuierlich weiterentwickelt wird.

Die Headless-Architektur plus Clean-Core-Prinzip bedeutet: Wenn morgen ein neuer Zahlungsanbieter, eine neue Sprache oder ein neuer Vertriebskanal dazukommt, ist das eine Erweiterung — kein Rewrite. Und Shopware-Updates kosten Stunden, nicht Wochen.

Ready for your project?

Let's explore how AI-powered development can drive your business forward.

Start your project