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

Key Takeaways

• Eine Shopify-Theme-Migration zieht einen Shop von einem Theme auf ein anderes um. Ein Vintage-Theme auf Online Store 2.0 umzuziehen bedeutet, es neu aufzubauen, nicht nur Dateien rüberzukopieren.
• 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 Metaobjects liegen in deinen Shop-Daten, nicht im Theme. Sie überstehen den Umzug, aber die dynamischen Quellen, die sie anzeigen, sind theme-seitig und müssen neu verknüpft werden.
• Mach jeden Schritt in einem duplizierten, unveröffentlichten Theme. Die offiziellen Migrations-Docs von Shopify fangen genau damit an.
• KI übernimmt die repetitive Übersetzungsarbeit – Liquid umschreiben, monolithische Templates in Sections aufteilen, CSS und JS portieren –, während du dich um das Audit, Mapping und Testing kümmerst.

Eine Shopify-Theme-Migration ist der Prozess, bei dem ein Shop innerhalb von Shopify von einem Theme auf ein anderes umzieht. Dieser Guide behandelt die schwierigste Version dieses Jobs: Ein Vintage-Theme (vor 2021) auf ein Online Store 2.0-Theme wie Dawn umzuziehen oder ein veraltetes Basis-Theme durch ein modernes zu ersetzen. Das ist eine reine Theme-zu-Theme-Arbeit innerhalb von Shopify. Es ist keine Plattform-Migration von WooCommerce oder Magento.

Der Grund, warum diese Migration so schwer ist, liegt in der Struktur. Online Store 2.0 hat verändert, wie Themes aufgebaut sind. Shopify hat es am 29. Juni 2021 gelauncht und JSON-Templates sowie App-Blöcke eingeführt, damit Händler auf den meisten Seiten – und nicht nur auf der Startseite – Sections hinzufügen, entfernen und neu anordnen können.¹ Ein Vintage-Theme lässt sich nicht einfach direkt updaten. Du baust es auf der neuen Architektur neu auf und überträgst dann deine Anpassungen.

Dieses Playbook führt dich durch den gesamten Ablauf: das alte Theme auditieren, Sections und Settings mappen, KI (Claude) nutzen, um benutzerdefiniertes Liquid, CSS und JS in die neue Theme-Struktur zu übersetzen, Metafields und Templates erhalten, auf einem unveröffentlichten Theme testen und sich die ganze Zeit einen Rollback-Pfad offenhalten.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Entwicklererfahrung und mit hunderten von Shopify-Shops gearbeitet. Wir haben Fudge gebaut – einen KI-nativen Shopify Page Builder und Store Editor mit einer 4.8-Bewertung und einem Built for Shopify-Badge. Theme-Migrationen, Section-Mapping und Liquid-Rewrites sind die tägliche Arbeit hinter diesem Produkt.

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

Bevor du Code anfasst, solltest du verstehen, was sich eigentlich unterscheidet. Der Unterschied zwischen den beiden Architekturen ist der Grund dafür, dass eine Migration ein Neuaufbau ist.

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

Die wichtigste strukturelle Regel: Section-Dateien können nicht auf andere Section-Dateien verweisen.⁴ Vintage Templates, die mehrere {% section %}-Tags aneinanderreihen, müssen vereinfacht werden, da der Code in jeder neuen Section in sich geschlossen (self-contained) 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

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

Für jede benutzerdefinierte Section (Custom Section) im alten Theme musst du dich für eines von drei Ergebnissen entscheiden:

• Passt zu einer integrierten Section im neuen Theme (z. B. ein Hero-Banner oder eine Featured Collection). Verwende die Section des neuen Themes wieder und übernimm deine Einstellungen.
• Erfordert eine neue Custom Section, da keine der integrierten Sections passt. Du wirst sie neu bauen müssen.
• Kann wegfallen, da sie nicht mehr gebraucht wird oder durch ein natives Feature ersetzt wurde.

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

Das Mapping der Einstellungen ist genauso wichtig wie das Section-Mapping. Markenwerte in der alten settings_data.json werden nicht automatisch übertragen, da das neue Theme ein eigenes Schema definiert. Notiere dir die Werte für Farben, Schriftarten und Abstände, die du übernehmen möchtest, und trage sie dann in das neue 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