KI-gestützte Shopify-Theme-Migration: Das komplette Playbook

Wichtige Erkenntnisse

• Eine Shopify-Theme-Migration zieht einen Shop von einem Theme zu einem anderen um. Ein Vintage-Theme auf Online Store 2.0 zu migrieren, bedeutet einen Neuaufbau (Rebuild), nicht nur das Kopieren von Dateien.
• Vintage-Themes und Online Store 2.0-Themes verwenden unterschiedliche Template-Formate. Liquid-Templates werden zu JSON-Templates, und benutzerdefinierter Code muss in Sections verschoben werden.
• Metafields und Metaobjekte befinden sich in deinen Shop-Daten, nicht im Theme. Sie überstehen den Umzug, aber die dynamischen Quellen (Dynamic Sources), die sie anzeigen, gehören zum Theme und müssen neu verbunden werden.
• Führe jeden Schritt in einem duplizierten, unveröffentlichten Theme aus. Die Migrationsdokumentation von Shopify beginnt genau damit.
• KI übernimmt die wiederkehrende Übersetzungsarbeit – das Umschreiben von Liquid, das Aufteilen monolithischer Templates in Sections, die Portierung von CSS und JS –, während du das Audit, das Mapping und das Testing übernimmst.

Eine Shopify-Theme-Migration ist der Prozess, bei dem ein Shop innerhalb von Shopify von einem Theme zu einem anderen umzieht. Dieser Leitfaden behandelt die schwierigste Version dieser Aufgabe: ein Vintage-Theme (vor 2021) auf ein Online Store 2.0-Theme wie Dawn zu migrieren, oder ein veraltetes Basis-Theme durch ein modernes zu ersetzen. Das ist Theme-zu-Theme-Arbeit innerhalb von Shopify. Es ist keine Plattform-Migration von WooCommerce oder Magento.

Der Grund, warum diese Migration schwierig ist, liegt in der Struktur. Online Store 2.0 hat die Art und Weise verändert, wie Themes aufgebaut sind. Shopify hat es am 29. Juni 2021 eingeführt und JSON-Templates sowie App-Blöcke auf fast allen Seiten (nicht nur auf der Startseite) zugelassen, damit Händler Sections hinzufügen, entfernen und neu anordnen können.¹ Ein Vintage-Theme kann nicht via Update direkt aktualisiert werden. Du musst es auf der neuen Architektur neu aufbauen und dann deine Anpassungen übertragen.

Dieses Playbook führt dich durch den gesamten Ablauf: das Audit des alten Themes, das Mapping von Sections und Einstellungen, die Nutzung von KI (Claude), um benutzerdefiniertes Liquid, CSS und JS in die Struktur des neuen Themes zu übersetzen, den Erhalt von Metafields und Templates, das Testen in einem unveröffentlichten Theme und wie du dir jederzeit einen Rollback-Pfad offen hältst.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Entwicklungserfahrung und mit Hunderten von Shopify-Shops gearbeitet. Wir haben Fudge entwickelt – einen KI-nativen Shopify-Page-Builder und Shop-Editor mit einer 5,0-Bewertung und einem Built for Shopify-Badge. Theme-Migrationen, Section-Mapping und Liquid-Rewrites sind die tägliche Arbeit hinter dem Produkt.

Was sich zwischen einem Vintage-Theme und Online Store 2.0 ändert

Bevor du irgendwelchen Code anfasst, solltest du verstehen, was eigentlich anders ist. Die Kluft zwischen den beiden Architekturen ist der Grund, warum eine Migration ein Neuaufbau (Rebuild) ist.

Ein JSON-Template ist eine Datendatei. Es speichert eine Liste von Sections, die gerendert werden sollen, sowie deren Einstellungen, die die Händler im Theme-Editor verwalten.² Jedes JSON-Template kann bis zu 25 Sections rendern, jede Section kann bis zu 50 Blöcke enthalten, und ein Theme kann bis zu 1.000 JSON-Templates umfassen.² Diese Limits bestimmen, wie du ein altes monolithisches Template aufteilen musst.

Die wichtigste strukturelle Regel: Section-Dateien dürfen nicht auf andere Section-Dateien verweisen.⁴ Vintage-Templates, in denen mehrere {% section %}-Tags aufeinanderfolgen, müssen zusammengefasst (flattened) werden, da der Code innerhalb jeder neuen Section in sich geschlossen sein muss.

Schritt 1: Audit des alten Themes

Du kannst nichts migrieren, was du nicht katalogisiert hast. Beginne mit einer vollständigen Bestandsaufnahme des Themes, das du verlässt.

Arbeite dich durch die Theme-Dateien und notiere:

1. Jedes Custom-Template – Product, Collection, Page, Blog und alle alternativen Templates wie product.bundle.liquid.
2. Benutzerdefinierte Sections und Snippets – was sie rendern und wo sie verwendet werden.
3. Benutzerdefinierte Liquid-Logik – Schleifen (Loops), Bedingungen und Tag-Ausgaben, die ein Standard-Theme nicht hat.
4. Custom CSS und JS – Inline-Styles, Theme-Asset-Dateien und jegliche Script-Tags, die zu theme.liquid hinzugefügt wurden.
5. App Embeds und eingefügter App-Code – Snippets, die eine App in deinen Templates platziert hat.
6. Metafield- und Metaobjekt-Nutzung – wo benutzerdefinierte Daten ausgelesen und angezeigt werden.
7. Einstellungen – Werte in der settings_data.json, die Markenentscheidungen wie Farben, Schriftarten und Layout-Optionen widerspiegeln.

Hier macht sich KI schon früh bezahlt. Weise Claude auf das Verzeichnis des Themes hin und bitte es, jede Datei mit Custom-Logik aufzulisten, {% section %}-Referenzen zu markieren und zusammenzufassen, was jedes Snippet tut. Es liest das gesamte Theme schneller, als ein Mensch durch Dateien scrollen kann. Unser Leitfaden zum Bearbeiten eines Shopify-Themes behandelt, wie du direkt im Theme-Code arbeitest.

Eine Warnung aus den offiziellen Richtlinien von Shopify: Anpassungen, die durch Apps oder manuell an einem Theme vorgenommen wurden, können nicht automatisch migriert werden.⁵ Das Audit zeigt dir, wie viel manuelle Übersetzungsarbeit noch vor dir liegt.

Schritt 2: Mapping von Sections und Einstellungen auf das neue Theme

Nachdem die Bestandsaufnahme abgeschlossen ist, ordnest du jedes alte Element seinem Platz im neuen Theme zu. Dies ist der Plan, dem der Rest der Migration folgt.

Für jede benutzerdefinierte Section im alten Theme triffst du eine von drei Entscheidungen:

• Entspricht einer integrierten Section im neuen Theme (zum Beispiel ein Hero oder eine Featured Collection). Verwende die Section des neuen Themes und übernimm deine Einstellungen.
• Benötigt eine neue Custom Section, da nichts Integriertes passt. Diese wirst du neu aufbauen.
• Kann gelöscht werden, da sie nicht mehr gebraucht oder durch eine native Funktion ersetzt wurde.

Notiere das Mapping in einer einfachen Tabelle, damit nichts verloren geht:

Das Mapping der Einstellungen (Settings) ist genauso wichtig wie das Mapping der Sections. Markenwerte in der alten settings_data.json werden nicht automatisch übertragen, da das neue Theme ein eigenes Schema definiert. Notiere dir die Farb-, Schriftart- und Abstands-Werte, die du übernehmen möchtest, und richte sie dann im neuen Theme ein.

Schritt 3: Nutze KI, um Custom Liquid in Sections zu übersetzen

Dies ist das Herzstück der Migration und der ressourcenintensivste Teil. Jedes Custom-Template muss zu einem JSON-Template werden, und sein Code muss in in sich geschlossene Sections wandern.

Der Migrationsprozess von Shopify für ein einzelnes Template sieht so aus:⁴

1. Dupliziere das Theme und lass es unveröffentlicht, während du es bearbeitest.
2. Entferne {% section %}-Tags aus dem Liquid-Template, da Section-Dateien keine anderen Sections referenzieren dürfen.
3. Verschiebe den verbleibenden Code in bestehende oder in neue Sections.
4. Lösche das ursprüngliche .liquid-Template, da eine product.liquid und eine product.json nicht beide gleichzeitig im Verzeichnis /templates existieren dürfen.
5. Erstelle das JSON-Template und füge die Section unter sections und order ein.
6. Teste das Template im Theme-Editor.
7. Füge weitere Sections hinzu und lege deren Reihenfolge in der JSON-Datei fest.
8. Aktiviere App-Blöcke, indem du {% schema %}-Blöcke mit dem "type": "@app" hinzufügst und mit {% render block %} ausgibst.
9. Wiederhole dies für jedes Template.

Claude eignet sich hervorragend für die Schritte 2 bis 5. Übergib der KI das alte Template sowie die Section-Konventionen des neuen Themes und bitte sie, das Template in eigenständige Sections aufzuteilen, das {% schema %} für jede zu schreiben und das JSON-Template zu erstellen, das diese miteinander verbindet. Es wird die Feldtypen nicht erraten, wenn du das Shopify KI-Toolkit und Claude Code eingerichtet hast, das Liquid und Schemas anhand der aktuellen Shopify-Regeln validiert.

Ein guter Prompt dafür:

Konvertiere diese Vintage product.liquid in ein Online Store 2.0 JSON-Template.
Teile sie in eigenständige (self-contained) Sections auf – keine Section darf auf eine andere Section verweisen.
Schreibe für jede Section ein {% schema %}, das die hier gezeigten Settings bereitstellt: [Liste].
Gib die Sections und die product.json aus, die sie in der richtigen Reihenfolge (order) rendert.

Überprüfe jeden Output. Die KI nimmt dir das Tippen ab, nicht das Nachdenken. Stelle sicher, dass die Namen der Settings übereinstimmen, dass die Bindungen deiner dynamischen Quellen erhalten bleiben und dass keine {% section %}-Referenz die Aufteilung im Code überlebt hat.

Schritt 4: Portiere Custom CSS und JS

Vintage-Themes tragen oft über Jahre hinweg angesammeltes CSS und Inline-Scripte mit sich. Sie sauber umzuziehen, ist eine Aufgabe für sich.

Der praktische Ansatz:

• Scope Section-CSS auf die Section. Online Store 2.0-Sections können ihre eigenen Styles enthalten, was das CSS beim zugehörigen Markup belässt, anstatt es in einer großen globalen Datei zu verwalten.
• Lösche ungenutzten Code (dead rules). Alte Themes akkumulieren CSS für Sections, die schon lange nicht mehr existieren. Bitte Claude, dein Stylesheet mit den Sections abzugleichen, die du behältst, und CSS-Regeln zu markieren, zu denen kein Markup mehr passt.
• Überprüfe JS-Event-Bindings. Skripte, die an alte CSS-Klassen oder IDs gekoppelt waren, gehen kaputt, wenn sich das Markup ändert. Bestätige, dass die Selektoren weiterhin stimmen.

App-Code, der nach dem Deinstallieren einer App zurückbleibt, ist eine der Hauptursachen für ungenutztes CSS und JS. Unser Leitfaden zum Entfernen von übrig gebliebenem App-Code aus Shopify zeigt, wie du ihn während der Migration finden und säubern kannst.

Performance und Speed sind gute Gründe für eine Migration. Mache dir diesen Vorteil also nicht zunichte, indem du alten Ballast mitschleppst. Erfahre wie man ein Shopify-Theme schneller macht, um zu wissen, was du checken solltest, wenn das neue Theme steht.

Schritt 5: Metafields und Templates erhalten

Dies ist der Schritt, vor dem die meisten Respekt haben, doch er verzeiht mehr Fehler als gedacht – vorausgesetzt, du bist dir darüber im Klaren, wo die Daten liegen.

Metafields und Metaobjekte sind Shop-Daten, keine Theme-Daten. Sie liegen auf Store-Ebene und bleiben vom veröffentlichten Theme völlig unberührt. Das Migrieren eines Themes löscht sie nicht. Was im Theme existiert, ist die Anzeige: Die dynamischen Quellen (Dynamic Sources), die ein Metafield mit einer Section oder einem Block verknüpfen, sind reines Theme-Setting.³

Die Faustregel lautet also:

• Definitionen und Werte von Metafields und Metaobjekten überleben den Theme-Wechsel problemlos.
• Die Verknüpfungen (Bindings) – dynamische Quellen in Sections und Blöcken – werden pro Theme gesetzt und müssen im neuen Theme neu angedockt werden.³

Notiere während deines Audits jeden Ort, an dem das alte Theme ein Metafield ausliest. Baue diese Bindings im neuen Theme über die dynamischen Quellen im Theme-Editor oder direkt als Section-Liquid wieder auf. Unser Leitfaden zum Hinzufügen von Metafields zu Shopify-Produkten behandelt die Anzeigeseite im Detail.

Alternative Templates werden als Konzept übernommen, jedoch nicht als 1:1 Dateien. Wenn das alte Theme eine page.about.liquid besaß, baust du im neuen Theme eine page.about.json auf. Ein Theme kann bis zu 1.000 JSON-Templates enthalten, ihr Limit ist also keine wirkliche Einschränkung.²

Schritt 6: Teste auf einem unveröffentlichten Theme

Bis hierhin fand jeder einzelne Schritt auf einem duplizierten, unveröffentlichten Theme statt. Die Testphase ist der Grund dafür. Die offiziellen Migrationsleitfäden von Shopify beginnen explizit mit dem Duplizieren des Themes und der Arbeit im Hintergrund.⁴

Teste dies, solange das Theme noch im Draft-Modus ist:

1. Vorschaubild für jeden Template-Typ – Home, Product, Collection, Cart, Search, Blog, Page, 404.
2. Prüfe, ob jede migrierte Section sauber gerendert wird und ob die Settings im Editor greifen.
3. Bestätige, dass dynamische Quellen die korrekten Metafield-Werte für deine echten Produkte ausspielen.
4. Teste App-Blöcke auf allen Pages, die sie nutzen.
5. Gehe den gesamten Kaufprozess (Funnel) durch – vom Product über Cart bis hin zum Checkout.
6. Prüfe Mobile- und Desktop-Ansichten für sämtliche Key-Templates.
7. Vergleiche Seite für Seite mit dem Live-Theme, damit nicht lautlos ein Feature verschwindet.

Ein Development Store (Entwicklungs-Shop) ist ein sicherer Ort, um eine Migration zu testen, bevor du die Theme-Library deines Live-Stores überhaupt antastest.

Schritt 7: Halte einen Rollback-Plan bereit

Eine Migration ist nicht abgeschlossen, wenn das neue Theme live geht. Sie ist erst dann beendet, wenn du dir absolut sicher bist, dass ein Zurückgehen (Rollback) nicht mehr nötig ist. Dieser Rollback-Pfad gibt dir exakt dieses Vertrauen.

Dein Rollback-Plan:

• Behalte das alte Theme in der Library. Lösche das Vintage-Theme nicht direkt nach dem Live-Gang. Es dient als dein One-Click-Revert.
• Dupliziere alles vor dem Publish. Veröffentliche eine Kopie des fertigen neuen Themes, nicht den Arbeitsentwurf, damit dieser sauber bleibt, falls du etwas fixen und neu veröffentlichen musst.
• Dokumentiere Theme-Settings. Halte die wichtigsten Settings des neuen Themes (z.B. Farben/Typo) fest, falls du bei Problemen mal Dinge schnell rekonfigurieren musst.
• Publish in einer ruhigen Zeit. Veröffentliche bei wenig Traffic (z. B. nachts). Das minimiert den Schaden (Blast Radius), falls du doch resetten musst.
• Monitoring nach dem Launch. Überwache Analytics und eventuelle Error-Logs in den ersten Stunden aufmerksam. Wenn die Conversion-Rate einbricht oder eine Key-Page fehlerhaft ist, wechsle zurück auf das alte Theme und suche nach dem Fehler abseits deines aktiven Traffics.

Da das alte Theme unberührt und sicher in der Bibliothek liegt, ist das Wiederherstellen des alten Stands so simpel wie ein Klick auf „Veröffentlichen“. Dieses Sicherheitsnetz ist der Hauptgrund, warum alles an einer Kopie durchgeführt wird.

Vollständige Checkliste für die Migration

Führe die Migration in dieser Reihenfolge durch:

1. Auditiere das Vintage-Theme – Templates, Sections, Snippets, Custom-Liquid, CSS, JS, App-Code, Metafields, Settings.
2. Mappe jedes Custom-Element zu einem neuen Ziel-Element im neuen Theme: Wiederverwenden, neu aufbauen oder löschen.
3. Dupliziere das neue Basis-Theme und halte es unveröffentlicht im Hintergrund.
4. Konvertiere jedes Liquid-Template in ein JSON-Template und verschiebe den Code in eigene, geschlossene Sections.
5. Schreibe jeweils ein {% schema %} für jede neue Section und setze die JSON-Reihenfolge (order).
6. Portiere CSS & JS, scope die Styles direkt an die Sections und entferne ungenutzten Code.
7. Reconnecte Metafields und Metaobjekte über die dynamischen Quellen im neuen Theme.
8. Erstelle alternative Templates als JSON neu.
9. Teste wirklich jeden Template-Typ auf dem unveröffentlichten Theme (inkl. Mobile und Checkout).
10. Veröffentliche ein Duplikat des fertigen neuen Themes in einem Zeitraum mit wenig Traffic.
11. Behalte das alte Theme als dein Rollback-Netzt in der Theme-Bibliothek.
12. Monitore die Shop-Analytics und Fehler-Logs nach dem Start.

Wo KI hilft und wo nicht

KI verändert den zeitlichen – und damit monetären – Aufwand einer Migration enorm. Sie nimmt dir vor allem die stumpfe, monotone Code-Übersetzung kompetent ab. Sie übernimmt jedoch nicht den Job an den Punkten, bei denen es auf menschliches und fachliches Verständnis ankommt.

KI ist extrem gut in diesen Dingen:

• Analysieren des gesamten Themes und Auflisten aller Custom-Logik.
• Das Aufspalten monolitischer Liquid-Templates in geschlossene Sections.
• Das Erstellen von passenden {% schema %}-Konfigurationen und JSON-Templates.
• Das Abgleichen von bestehendem CSS mit den Code-Resten, um Leichen im Code (Dead Rules) zu finden.
• Dir haarklein zu erklären, was ein Stück geerbtes Legacy-Liquid eigentlich macht, bevor du anfängst, es umzuziehen.

Das bleibt hingegen bei deiner Fachkraft:

• Entscheidungen beim Section-Mapping.
• Die finale Bestätigung dynamischer Quellen und Metafield-Bindings.
• Test-Läufe mit deinen echten Produkten und im durchgängigen Checkout.
• Das Timing des Publsihens und des ggfs. nötigen Rollbacks.

Mehr darüber, wie KI-native Werkzeuge sich elegant in moderne Shopify-Flows verzahnen, gibt es in unserem Post rund um KI-gestützte Shopify-Entwicklung (AI-first). Dieser Ethos stützt auch den Ansatz unseres Tools Fudge, das nativen Shopify-Code für fertige Sections bastelt und direkt ab in Themes schieben kann.

Zusammenfassung

Eine Shopify-Theme-Migration von einem Vintage-Theme zur starken Online Store 2.0-Architektur ist zwangsläufig ein technischer „Rebuild“, da beide Welten Templates komplett anders auswerten. Deine Arbeit spaltet sich in das Audit, Mapping, Code-Übersetzung (Translation), Neuverknüpfung der Metafields, intensive Testläufe und dein Rollback-Setup.

Die KI ist dein fleißiger Helfer für die unliebsame Fließbandarbeit: Theme lesen, Templates zerlegen, Schemas texten und toten Code aussortieren. Du behältst dein Strategie-Mapping, das Qualitäts-Testing sowie die Freigabe des Publishings unter deiner Fittiche. Handle strikt auf duplizierten, unveröffentlichten Layouts und deponiere dein altes Vintage-Netz beruhigt im Library-Archiv – so stehst du notfalls immer genau einen Revert-Klick entfernt auf sicherem Boden.

FAQ