commercetools Frontend Migration Step by Step (2026 Guide)

Eine commercetools-Frontend-Migration ist kein Theme-Update mit Extras. Sie ist ein eigenständiges Projekt mit Phasen, Stakeholdern, Risiken und einem klaren Übergangsplan. Wer die Phasen kennt, vermeidet die typischen Fehler und kann das Projekt auch in kleinen Schritten kontrolliert ausrollen.

Dieser Guide zeigt sechs Phasen, jeweils mit Zielen, typischer Dauer und den häufigsten Stolperfallen.

Phase 0: Vorbereitung, bevor das Projekt offiziell startet

Ziel: Klarheit über Geschäftsziel, Stakeholder, Budget, Zeithorizont. Typische Dauer: 1 bis 2 Wochen.

In dieser Phase fixieren Sie das „Warum": Marketing-Velocity, Backend-Optionalität, Frontastic-Lock-in beenden, BFSG-Compliance, oder eine Kombination. Aus dem Warum ergibt sich die Priorisierung und damit, wo das Projekt scharf gestellt wird.

Identifizieren Sie zwei Schlüssel-Stakeholder: einen technischen Architekten (idealerweise mit ct-Stack-Erfahrung) und einen Marketing- oder Brand-Owner. Ohne diese Doppelspitze kippt das Projekt in jede Richtung in den Stillstand.

Häufiger Fehler: Migration starten, weil „Composable im Trend ist". Ohne klares Geschäftsziel keine messbaren Erfolge.

Phase 1: Discovery und Architektur

Ziel: Technische Bestandsaufnahme, Architektur-Entscheidung, Vendor-Auswahl. Typische Dauer: 3 bis 5 Wochen.

Inventarisieren Sie Ihren bestehenden ct-Stack: Multi-Project-Setup, aktive Stores, Customer Groups, Cart Discounts, Custom Objects, Custom Fields, B2B-Konfiguration. Welche dieser Strukturen werden vom Frontend gebraucht, welche bleiben backend-intern?

Treffen Sie die Frontend-Entscheidung: bleiben Sie bei Eigenbau, wechseln Sie zu Frontastic, oder gehen Sie auf eine FMP wie Laioutr? Diese Frage wird im Detail in Frontastic vs. Laioutr entschieden.

Häufiger Fehler: ct-spezifische Custom Logic wird im Audit übersehen. Custom Objects, die einen Konfigurator stützen, oder Custom Fields, die für bestimmte Workflows kritisch sind, müssen früh dokumentiert werden.

Phase 2: Setup und Integration

Ziel: Frontend-Plattform aufsetzen, ct-Anbindung herstellen, Drittsysteme integrieren. Typische Dauer: 2 bis 4 Wochen.

Mit Laioutr richten Sie Studio ein, verbinden die commercetools API (REST und GraphQL), konfigurieren Multi-Project-Setups falls vorhanden, docken App-Integrationen (Reviews, Suche, Personalisierung) an und integrieren Drittsysteme über den App Store.

Häufiger Fehler: Die ct-API-Credentials werden zu eng geschnitten oder mit zu wenigen Scopes konfiguriert. Späteres Nachtragen erfordert Coordination mit dem ct-Admin-Team. Lieber vorab großzügig planen.

Phase 3: Komponenten- und Theme-Aufbau

Ziel: Tatsächliche Storefront bauen, Produktdetail, Listing, Home, Landingpages, B2B-Portale falls vorhanden. Typische Dauer: 4 bis 10 Wochen, je nach Branding-Tiefe und Custom-Logic.

Hier zeigt sich, ob Ihre Wahl der Plattform Time-to-Launch hält. Mit Laioutrs UI-Bibliothek (70+ Komponenten) und einem Theme starten Sie nicht bei null. Branding-Anpassungen, individuelle Komponenten und ct-spezifische Logik (B2B-Quote-Requests, Konfiguratoren, Approval-Flows) bauen Sie auf der bestehenden Basis.

Häufiger Fehler: Designsystem und Komponenten werden parallel zur Storefront entwickelt, statt vorgelagert. Das führt zu Doppel-Arbeit und inkonsistenten Komponenten.

Phase 4: Datenmigration und Inhalts-Transfer

Ziel: Bestehende Inhalte (Blog, statische Pages, SEO-Content) sicher übertragen. Typische Dauer: 2 bis 3 Wochen.

Bei einer Migration von Frontastic: bestehende Studio-Pages, Custom Components, Plugin-Konfigurationen werden inventarisiert und in Laioutr nachgebaut. Bei einer Migration von Eigenbau: Templates, statische Inhalte, Blog-Posts werden ins Studio überführt.

Häufiger Fehler: Blog-URLs und SEO-Content werden vergessen. Dann verlieren Sie organischen Traffic, der über Jahre aufgebaut wurde.

Phase 5: SEO-Übergang und Redirects

Ziel: Bestehende Rankings retten, Backlinks erhalten, neue Architektur bei Google sauber registrieren. Typische Dauer: 1 Woche, parallel zu Phase 4.

Drei Bausteine müssen sitzen:

Erstens: eine vollständige 301-Redirect-Map. Jede alte URL bekommt eine neue. Achten Sie besonders auf Kategorie-URLs, Filter-Parameter, Pagination und Multi-Store-URLs (ct Stores erzeugen eigene URL-Strukturen pro Store).

Zweitens: saubere Hreflang- und Canonical-Tags, vor allem wenn Sie Multi-Markt mit ct Stores fahren.

Drittens: Schema.org-Markup neu setzen: Organization, Product, BreadcrumbList, FAQPage. Strukturierte Daten sind ein direkter Ranking-Faktor.

Häufiger Fehler: Alte Sitemap.xml wird vergessen, Google indexiert tagelang ein Mischmasch aus alten und neuen URLs. Lieber kontrolliert deindexieren und neu submitten.

Phase 6: Go-live, Monitoring, Iteration

Ziel: Live gehen und sicherstellen, dass nichts kippt. Typische Dauer: Go-live an einem Werktag, Stabilisierung 2 bis 3 Wochen.

Gehen Sie nicht freitags live. Gehen Sie an einem Dienstag oder Mittwoch live, mit Engineering, Marketing und Customer Care anwesend. Beobachten Sie in den ersten 72 Stunden besonders: Conversion-Rate, Bounce-Rate, Core Web Vitals, ct-API-Latenzen, Search-Console-Auffälligkeiten.

Häufiger Fehler: Go-live ohne Rollback-Plan. Wenn etwas Großes bricht, müssen Sie in 30 Minuten zurück können. Das heißt: der alte Frontend-Stack muss notfalls wieder aktiviert werden können.

Typische Gesamt-Timeline

Für ein mittleres ct-Projekt mit klarem Branding und ohne exotische Custom Logic: 10 bis 18 Wochen vom Kickoff bis zum Go-live. Mit Multi-Brand-Setup, B2B-Funktionalität oder umfangreichen ERP-Anbindungen entsprechend mehr.

Welche Partner Sie unterstützen

Eine Migration auf eigene Faust ist möglich, aber selten der schnellste Weg. In Deutschland haben sich für commercetools-Frontend-Projekte mit Laioutr besonders bewährt: valantic für Enterprise-Composable-Setups und Frontastic-Migrationen. Eine vollständige Liste finden Sie im Bereich Partner.

Fazit: Migration ist Architektur-Arbeit

Eine erfolgreiche Frontend-Migration auf commercetools scheitert selten an der Technologie. Sie scheitert an unklaren Zielen, fehlender Architekten-Verantwortung oder einer SEO-Phase, die zu spät bedacht wird. Wer die sechs Phasen sauber durchgeht, hat einen kontrollierten Übergang, kein Risiko-Projekt.

Wenn Sie eine konkrete Migration planen, gehen wir mit Ihnen einen Audit durch, ehrlich, mit konkretem Phasenplan und realistischer Timeline für Ihren Setup.

• Demo anfragen
• Frontend für commercetools im Detail
• Wann lohnt sich der Wechsel überhaupt?

Weiterführende Ressourcen: Composable Headless Frontend, Headless Frontend für commercetools und Content-Management.