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

Wichtigste Erkenntnisse

• Eine Shopify-Theme-Migration überträgt einen Shop von einem Theme auf ein anderes. Ein Vintage-Theme auf Online Store 2.0 umzuziehen bedeutet, es neu aufzubauen, anstatt nur Dateien zu kopieren.
• 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.
• Metafelder (Metafields) und Metaobjekte (Metaobjects) leben in deinen Shop-Daten, nicht im Theme. Sie überstehen den Umzug, aber die Verbindungen zu dynamischen Quellen (Dynamic Sources), die sie anzeigen, sind theme-seitig und müssen neu verknüpft werden.
• Führe jeden Schritt in einem duplizierten, unveröffentlichten Theme durch. Shopifys eigene Migrations-Dokus beginnen genau damit.
• KI übernimmt die repetitive Übersetzungsarbeit – Liquid umschreiben, monolithische Templates in Sections aufteilen, CSS und JS portieren –, während du dich um das Audit, das Mapping und das Testing kümmerst.

Eine Shopify-Theme-Migration ist der Prozess, einen Shop innerhalb von Shopify von einem Theme auf ein anderes umzuziehen. Dieser Guide behandelt die schwierigste Version dieser Aufgabe: ein Vintage-Theme (vor 2021) auf ein Online Store 2.0-Theme wie Dawn zu migrieren, oder ein in die Jahre gekommenes Basis-Theme durch ein modernes zu ersetzen. Dies ist reine Theme-zu-Theme-Arbeit innerhalb von Shopify. Es ist keine Plattform-Migration von WooCommerce oder Magento.

Der Grund, warum diese Migration schwierig ist, ist struktureller Natur. Online Store 2.0 hat die Art und Weise verändert, wie Themes erstellt werden. Shopify hat es am 29. Juni 2021 eingeführt und JSON-Templates sowie App Blocks eingeführt, damit Händler auf den meisten Seiten Sections hinzufügen, entfernen und neu anordnen können, nicht nur auf der Startseite.¹ Ein Vintage-Theme kann nicht per In-Place-Upgrade aktualisiert werden. 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 Einstellungen mappen, KI (Claude) nutzen, um benutzerdefiniertes Liquid, CSS und JS in die neue Theme-Struktur zu übersetzen, Metafelder und Templates zu erhalten, in einem unveröffentlichten Theme zu testen und sich jederzeit einen Rollback-Weg offenzuhalten.

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.9-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: Das alte Theme auditieren

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

Gehe die Theme-Dateien durch und notiere:

1. Jedes benutzerdefinierte Template - Produkt, Collection, Seite, Blog und alternative Templates wie product.bundle.liquid.
2. Benutzerdefinierte Sections und Snippets - was sie rendern und wo sie verwendet werden.
3. Benutzerdefinierte Liquid-Logik - Schleifen, Bedingungen und Tag-Ausgaben, die ein Standard-Theme nicht hat.
4. Benutzerdefiniertes CSS und JS - Inline-Styles, Theme-Asset-Dateien und alle Script-Tags, die zu theme.liquid hinzugefügt wurden.
5. App Embeds und eingefügter App-Code - Snippets, die eine App in deine Templates abgelegt hat.
6. Metafeld- 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. Zeige Claude das Theme-Verzeichnis und bitte die KI, jede Datei aufzulisten, die benutzerdefinierte Logik enthält, {% section %}-Referenzen zu markieren und zusammenzufassen, was jedes Snippet tut. Sie liest das gesamte Theme schneller, als ein Mensch durch die Dateien scrollen kann. Unser Guide zum Bearbeiten eines Shopify-Themes erklärt, wie man direkt im Theme-Code arbeitet.

Ein wichtiger Hinweis aus Shopifys eigenen Richtlinien: Anpassungen, die von Apps oder manuell an einem Theme vorgenommen wurden, können nicht automatisch migriert werden.⁵ Das Audit zeigt dir, wie viel manuelle Übersetzungsarbeit vor dir liegt.

Schritt 2: Sections und Einstellungen auf das neue Theme mappen

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

Entscheide dich für jede benutzerdefinierte Section im alten Theme für eines von drei Ergebnissen:

• Entspricht einer integrierten Section im neuen Theme (zum Beispiel einem Hero-Banner oder einer Featured Collection). Verwende die Section des neuen Themes wieder und übertrage deine Einstellungen.
• Benötigt eine neue Custom Section, weil nichts Integriertes passt. Diese wirst du neu aufbauen.
• Kann weggelassen werden, weil sie nicht mehr benötigt oder durch ein natives Feature ersetzt wird.

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

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

Schritt 3: KI nutzen, um benutzerdefiniertes Liquid in Sections zu übersetzen

Das ist das Herzstück der Migration und der Teil mit der meisten repetitiven Arbeit. Jedes benutzerdefinierte Template muss zu einem JSON-Template werden, und der Code muss in eigenständige Sections verschoben werden.

Der Migrationsprozess von Shopify für ein einzelnes Template läuft so ab:⁴

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 können.
3. Verschiebe den verbleibenden Code in bestehende oder neue Sections.
4. Lösche das ursprüngliche .liquid-Template, da eine product.liquid und eine product.json nicht gleichzeitig im Ordner /templates existieren können.
5. Erstelle das JSON-Template und liste die Section unter sections und order auf.
6. Teste das Template im Theme-Editor.
7. Füge weitere Sections hinzu und lege ihre Reihenfolge in der JSON-Datei fest.
8. Aktiviere App Blocks, indem du {% schema %}-Blöcke vom Typ "type": "@app" hinzufügst und sie mit {% render block %} renderst.
9. Wiederhole das Ganze für jedes Template.

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

Ein Prompt, der gut funktioniert:

Convert this vintage product.liquid into an Online Store 2.0 JSON template.
Split it into self-contained sections - no section can reference another section.
Write a {% schema %} for each section exposing the settings shown here: [list].
Output the sections and the product.json that renders them in order.

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

Schritt 4: Benutzerdefiniertes CSS und JS portieren

Vintage-Themes enthalten oft jahrelang angesammelte CSS-Ebenen und Inline-Skripte. Diese sauber zu übertragen, ist eine Aufgabe für sich.

Ein praktischer Ansatz:

• Beschränke das CSS auf die Section (Scoping). Online Store 2.0-Sections können ihre eigenen Styles mitbringen. Das hält das CSS bei dem Markup, auf das es angewendet wird, anstatt alles in einer globalen Datei zu sammeln.
• Entferne toten Code. Alte Themes sammeln CSS für Sections an, die gar nicht mehr existieren. Bitte Claude, dein Stylesheet mit den Sections abzugleichen, die du behältst, und CSS-Regeln ohne passendes Markup zu markieren.
• Überprüfe JS Event-Bindings. Skripte, die auf alte Klassennamen oder IDs angewiesen sind, gehen kaputt, wenn sich das Markup ändert. Bestätige, dass die Selektoren noch passen.

App-Code, der nach dem Entfernen einer App zurückbleibt, ist eine häufige Quelle für totes CSS und JS. Unser Guide zum Entfernen von übrig gebliebenem App-Code aus Shopify erklärt, wie du ihn während einer Migration findest und entfernst.

Geschwindigkeit ist ein guter Grund für eine Migration – mache diesen Vorteil also nicht zunichte, indem du Datenmüll mitschleppst. Sieh dir an, wie man ein Shopify-Theme schneller macht, um zu wissen, worauf du achten musst, sobald das neue Theme steht.

Schritt 5: Metafelder und Templates erhalten

Das ist der Schritt, vor dem sich die meisten fürchten, aber er ist nachsichtiger als erwartet, solange du weißt, wo die Daten leben.

Metafelder und Metaobjekte sind Shop-Daten, keine Theme-Daten. Sie befinden sich auf Shop-Ebene und sind unabhängig davon, welches Theme veröffentlicht ist. Eine Theme-Migration löscht sie nicht. Was im Theme lebt, ist die Anzeige: Die Dynamic Sources (dynamischen Quellen), die ein Metafeld an eine Section oder einen Block binden, sind theme-seitige Einstellungen.³

Die Regel lautet also:

• Metafeld- und Metaobjekt-Definitionen und -Werte überstehen den Theme-Wechsel, weil sie nicht im Theme liegen.
• Die Verbindungen, die sie anzeigen – Dynamic Source-Bindungen in Sections und Blöcken – werden pro Theme festgelegt und müssen im neuen Theme neu verknüpft werden.³

Notiere dir während deines Audits jede Stelle, an der das alte Theme ein Metafeld ausliest. Im neuen Theme baust du diese Bindungen über die Dynamic Sources im Editor oder im Section-Liquid wieder auf. Unser Guide zum Hinzufügen von Metafeldern zu Shopify-Produkten behandelt die Anzeigeseite im Detail.

Alternative Templates werden als Konzept übertragen, aber nicht als Dateien. Wenn das alte Theme eine page.about.liquid hatte, erstellst du im neuen Theme eine page.about.json. Ein Theme kann bis zu 1.000 JSON-Templates enthalten, die Anzahl der Templates ist also kein Hindernis.²

Schritt 6: In einem unveröffentlichten Theme testen

Jeder bisherige Schritt fand in einem duplizierten, unveröffentlichten Theme statt. Das Testing ist der Grund dafür. Die Migrations-Dokus von Shopify beginnen genau damit: das Theme zu duplizieren und es während der Arbeit unveröffentlicht zu lassen.⁴

Teste, während das Theme noch unveröffentlicht ist:

1. Vorschau jedes Template-Typs - Startseite, Produkt, Collection, Warenkorb, Suche, Blog, Seite, 404.
2. Überprüfe, ob jede migrierte Section korrekt gerendert wird und sich ihre Einstellungen im Editor richtig verhalten.
3. Bestätige, dass die Dynamic Sources die richtigen Metafeld-Werte bei echten Produkten anzeigen.
4. Teste App Blocks auf den Seiten, auf denen sie verwendet werden.
5. Gehe den gesamten Kaufprozess durch, vom Produkt über den Warenkorb bis zum Checkout.
6. Prüfe Mobile und Desktop für jedes wichtige Template.
7. Vergleiche es Seite an Seite mit dem Live-Theme, damit nicht lautlos irgendetwas verschwindet.

Ein Development Store (Entwicklungs-Shop) ist ein sicherer Ort, um eine Migration zu üben, bevor du die Theme-Bibliothek des Produktions-Shops überhaupt anfasst.

Schritt 7: Einen Rollback-Plan bereithalten

Eine Migration ist nicht abgeschlossen, wenn das neue Theme live geht. Sie ist erst dann abgeschlossen, wenn du dir sicher bist, dass du nicht mehr zurückmusst – und ein Rollback-Plan verschafft dir genau diese Sicherheit.

Dein Rollback-Plan:

• Behalte das alte Theme in der Bibliothek. Lösche das Vintage-Theme nach der Veröffentlichung nicht. Es dient als dein 1-Klick-Revert.
• Dupliziere vor der Veröffentlichung. Veröffentliche eine Kopie des fertigen neuen Themes, nicht deinen Arbeitsentwurf. So bleibt dein Entwurf sauber, falls du etwas reparieren und erneut veröffentlichen musst.
• Notiere die Einstellungen. Notiere dir die wichtigsten Einstellungen des veröffentlichten Themes, damit du sie schnell wiederherstellen kannst, falls etwas nicht stimmt.
• Veröffentliche in einer ruhigen Zeit. Weniger Traffic bedeutet einen kleineren Blast Radius, falls du zurückrollen musst.
• Beobachte nach dem Launch. Überprüfe in den ersten Stunden die Analytics und Fehlerprotokolle. Wenn die Conversion einbricht oder eine wichtige Seite kaputt geht, wechsle zum alten Theme zurück und suche den Fehler abseits des Live-Betriebs.

Da das alte Theme unberührt in deiner Bibliothek liegt, bedeutet ein Rollback lediglich, es wieder zu veröffentlichen. Dieses Sicherheitsnetz ist der Grund, warum jeder frühere Schritt in einem Duplikat stattfindet.

Komplette Migrations-Checkliste

Führe die Migration in dieser Reihenfolge durch:

1. Audit des Vintage-Themes - Templates, Sections, Snippets, Custom Liquid, CSS, JS, App-Code, Metafelder, Einstellungen.
2. Mapping jedes benutzerdefinierten Elements auf ein Ziel im neuen Theme: wiederverwenden, neu aufbauen oder weglassen.
3. Dupliziere das neue Basis-Theme und behalte es unveröffentlicht.
4. Wandle jedes Liquid-Template in ein JSON-Template um und teile den Code in eigenständige Sections auf.
5. Schreibe ein {% schema %} für jede neue Section und verknüpfe die JSON-order.
6. Portiere CSS und JS, beschränke Styles auf die Sections (Scoping) und lösche toten Code.
7. Verknüpfe die Dynamic Sources für Metafelder und Metaobjekte im neuen Theme neu.
8. Erstelle alternative Templates als JSON neu.
9. Teste jeden Template-Typ im unveröffentlichten Theme, inklusive Mobile und Checkout.
10. Veröffentliche ein Duplikat des fertigen Themes in einem Zeitraum mit wenig Traffic.
11. Behalte das alte Theme in der Bibliothek als deinen Rollback.
12. Überwache Analytics und Fehler nach dem Launch.

Wo KI sinnvoll ist und wo nicht

KI verändert die Wirtschaftlichkeit einer Theme-Migration, indem sie die langsame, repetitive Übersetzungsarbeit abnimmt. Sie ersetzt jedoch nicht die Bereiche, die menschliches Urteilsvermögen erfordern.

KI macht Folgendes gut:

• Das Lesen eines ganzen Themes und Katalogisieren von benutzerdefinierter Logik.
• Das Aufteilen von monolithischen Liquid-Templates in eigenständige Sections.
• Das Schreiben von {% schema %}-Definitionen und JSON-Templates.
• Den Abgleich von CSS mit verbleibendem Markup, um tote Regeln zu finden.
• Die Erklärung, was ein Stück Legacy-Liquid tut, bevor du es verschiebst.

Deine Aufgaben bleiben:

• Die Entscheidungen beim Section-Mapping.
• Die Überprüfung von Dynamic Sources und Metafeld-Bindungen.
• Das Testen mit echten Produkten und dem vollständigen Checkout-Prozess.
• Die finale Entscheidung für Veröffentlichung und Rollback.

Mehr darüber, wie sich AI-native Tools in moderne Shopify-Workflows einfügen, erfährst du in unserem Beitrag über AI-first Shopify Development. Dies ist auch der Ansatz hinter Fudge, das native Shopify-Sections generiert und direkt in Themes bearbeitet.

Zusammenfassung

Eine Shopify-Theme-Migration von einem Vintage-Theme zum Online Store 2.0 ist ein Neuaufbau, weil die beiden Architekturen Templates unterschiedlich speichern. Die Arbeit teilt sich auf in Audit, Mapping, Übersetzung, Neuverknüpfung von Metafeldern, Testing und Rollback.

KI nimmt dir die repetitive Übersetzungsarbeit ab – das alte Theme lesen, Templates in Sections aufteilen, Schemas schreiben und toten Code finden. Du kümmerst dich weiterhin um das Mapping, das Testing und die Entscheidung zur Veröffentlichung. Führe alles in einem duplizierten, unveröffentlichten Theme durch und behalte das alte Theme in der Bibliothek, damit ein Revert nur einen Klick entfernt ist.

FAQ