KI-gestützte Shopify Theme-Migration: Vintage zu Online Store 2.0

Das Wichtigste in Kürze

• Eine Shopify Theme-Migration verschiebt einen Shop von einem Theme zu einem anderen. Ein Vintage Theme auf Online Store 2.0 umzuziehen bedeutet, es neu aufzubauen und nicht einfach 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.
• Metafelder und Metaobjekte leben in deinen Shop-Daten, nicht im Theme. Sie überstehen den Umzug, aber die 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 aus. Shopifys eigene Migrationsdokus beginnen genau hiermit.
• KI übernimmt die repetitive Übersetzungsarbeit – das Umschreiben von Liquid, das Aufteilen von riesigen Templates in Sections, das Portieren von CSS und JS – während du weiterhin Audit, Mapping und Tests durchführst.

Eine Shopify Theme-Migration ist der Prozess, bei dem ein Shop innerhalb von Shopify von einem Theme zu einem anderen umgezogen wird. Dieser Guide behandelt die schwierigste Form dieses Jobs: Ein Vintage Theme (vor 2021) zu nehmen und auf ein Online Store 2.0 Theme wie Dawn umzuziehen, oder ein in die Jahre gekommenes 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, ist struktureller Natur. 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 den Markt gebracht, damit Händler Sections auf fast allen Seiten hinzufügen, entfernen und neu anordnen können, nicht nur auf der Startseite.¹ Ein Vintage Theme kann nicht direkt (“in place”) aktualisiert werden. Du baust es auf der neuen Architektur neu auf und überträgst dann deine Anpassungen.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Entwicklungserfahrung und hat mit Hunderten von Shopify-Stores gearbeitet. Wir haben Fudge entwickelt, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 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

Die Kluft zwischen den beiden Architekturen ist der Grund, warum eine Migration ein kompletter Neuaufbau ist.

Ein JSON-Template ist eine Datendatei. Es speichert eine Liste von Sections, die gerendert werden sollen, sowie deren Einstellungen. Händler verwalten diese Sections im Theme-Editor.² Jedes JSON-Template kann bis zu 25 Sections rendern, jede Section kann bis zu 50 Blöcke aufnehmen, und ein Theme kann bis zu 1.000 JSON-Templates enthalten.² 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 stapeln, müssen abgeflacht werden, da der Code innerhalb jeder neuen Section in sich geschlossen 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 hier liegt die ganze Fleißarbeit. Jedes benutzerdefinierte Template muss zu einem JSON-Template werden, und sein Code muss in eigenständige Sections umziehen.

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

Claude eignet sich hervorragend für die Schritte 2 bis 5. Gib 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 auszugeben, das alles miteinander verbindet. Es ist viel unwahrscheinlicher, dass die KI Feldtypen erraten muss, wenn du das Shopify AI Toolkit und Claude Code eingerichtet hast, was Liquid und Schema anhand der aktuellen Shopify-Regeln validiert.

Ein Prompt, der funktioniert:

Konvertiere diese Vintage product.liquid in ein Online Store 2.0 JSON-Template.
Teile es in eigenständige Sections auf - keine Section darf auf eine andere Section verweisen.
Schreibe ein {% schema %} für jede Section, das die hier gezeigten Einstellungen freigibt: [Liste].
Gib die Sections und die product.json aus, die sie der Reihe nach rendert.

Überprüfe jeden Output. Die KI nimmt dir das Tippen ab, nicht das Mitdenken. Checke, ob die Namen der Einstellungen übereinstimmen, ob die dynamischen Quellen (Dynamic Sources) erhalten geblieben sind 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 Leute fürchten, und er verzeiht mehr Fehler als erwartet, solange du verstehst, wo die Daten liegen.

Metafelder und Metaobjekte sind Shop-Daten, keine Theme-Daten. Sie liegen auf Shop-Ebene und sind davon unberührt, welches Theme veröffentlicht ist. Eine Theme-Migration löscht sie nicht. Was im Theme lebt, ist die Anzeige: Die dynamischen Quellen, die ein Metafeld an eine Section oder einen Block binden, sind Theme-seitige Einstellungen.³

Die Regel lautet also:

• Definitionen und Werte von Metafeldern und Metaobjekten überleben den Theme-Wechsel, da sie nicht im Theme liegen.
• Die Verbindungen, die sie anzeigen – Bindungen von dynamischen Quellen in Sections und Blöcken – werden pro Theme festgelegt und müssen im neuen Theme neu verknüpft werden.³

Notiere während deines Audits jede Stelle, an der das alte Theme ein Metafeld ausliest. Baue diese Bindungen im neuen Theme über die dynamischen Quellen des Editors oder im Liquid der Section wieder auf. Unser Guide zum Thema Metafelder zu Shopify-Produkten hinzufügen behandelt die Anzeigeseite im Detail.

Alternative Templates (Alternate Templates) werden als Konzept übernommen, aber nicht als Dateien. Wenn das alte Theme eine page.about.liquid hatte, erstellst du im neuen Theme eine page.about.json.

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 beseitigt. Sie ersetzt aber nicht die Teile, die menschliches Urteilsvermögen erfordern.

Das macht die KI gut:

• Ein komplettes Theme lesen und die benutzerdefinierte Logik katalogisieren.
• Riesige monolithische Liquid-Templates in eigenständige Sections aufteilen.
• {% schema %}-Definitionen und JSON-Templates schreiben.
• CSS mit verbleibendem Markup abgleichen, um toten Code zu finden.
• Erklären, was ein altes Stück Liquid-Code macht, bevor du es verschiebst.

Das bleibt bei dir:

• Die Entscheidungen beim Section-Mapping.
• Die Überprüfung dynamischer Quellen und Metafeld-Bindungen.
• Das Testen mit echten Produkten und dem gesamten Checkout-Pfad.
• Die finale Entscheidung zur Veröffentlichung oder zum Rollback.

Mehr darüber, wie KI-native Tools in die moderne Arbeit mit Shopify passen, findest du in unserer Einschätzung zur KI-First Shopify-Entwicklung. Das ist auch der Ansatz hinter Fudge, dem KI-Operator für Shopify-Stores. Er schreibt native Shopify-Sections und Änderungen direkt als Entwürfe in dein Theme, die dein Team nur noch absegnen muss. Wenn du auf eine neue Theme-Version umsteigst, kann er die erstellten Sections und Änderungen als Entwurf für dich in das neue Theme übertragen. Um eine einzelne Section oder Seite neu aufzubauen, beschreibe sie einfach dem Shopify Store Editor.

FAQ