Das Wichtigste in Kürze
- Es gibt drei Wege, ein Shopify-Theme zu bearbeiten: den integrierten Theme-Editor, den Code-Editor und ein KI-Tool wie Fudge.
- Der Shopify-Theme-Editor übernimmt die meisten visuellen Änderungen – Farben, Schriftarten, Abschnitte – ohne dass du eine einzige Zeile Code schreiben musst.
- Die direkte Bearbeitung des Theme-Codes gibt dir die volle Kontrolle, erfordert aber Liquid- und CSS-Kenntnisse und birgt das Risiko, dass du etwas kaputt machst.
- Mit Fudge kannst du einfach beschreiben, was du willst, und es generiert den Code für dich – nichts geht live, bis du es genehmigt hast.
- Die meisten alltäglichen Änderungen am Shop erfordern keinen Entwickler.
Um ein Shopify-Theme zu bearbeiten, gehe zu Onlineshop → Themes und klicke auf Anpassen für den visuellen Theme-Editor, oder klicke auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Code bearbeiten für die Dateien. Eine dritte Option ist ein KI-Editor wie Fudge, der die Codeänderung als Entwurf schreibt.
Dieser Leitfaden führt dich durch alle drei Optionen: was jede macht, wann du sie verwendest und wie du sie anwendest.
Warum du uns vertrauen kannst
Jacques hat über 15 Jahre Erfahrung in der Softwareentwicklung und hat mit vielen Shopify-Marken an ihren Storefronts gearbeitet. Wir sind seit vier Jahren im Shopify-Ökosystem und arbeiten direkt mit Hunderten von Händlern zusammen. Wir entwickeln auch Fudge, den KI-Operator für Shopify-Shops, mit einer Bewertung von 4.9 im Shopify App Store.
Die 3 Wege, ein Shopify-Theme zu bearbeiten
Nicht alle Theme-Anpassungen sind gleich. Die Methode, die du wählst, sollte zu dem passen, was du ändern willst.
1. Der Shopify Theme Editor (No-Code)
Das ist Shopifys integrierter visueller Editor. Er deckt die meisten alltäglichen Änderungen ab – Farben, Schriftarten, Reihenfolge der Abschnitte, Bilder, Layout-Einstellungen – mit einer Live-Vorschau während der Bearbeitung.
Kein Code erforderlich. Jeder in deinem Team kann ihn nutzen.
2. Der Shopify Code-Editor (für Entwickler)
Shopify gibt dir auch direkten Zugriff auf die Liquid-, HTML-, CSS- und JavaScript-Dateien deines Themes. Das ermöglicht alles – erfordert aber technisches Wissen, und ein einziger Fehler kann deine Storefront zerschießen.
Die meisten Händler müssen sich hier nicht aufhalten.
3. Ein KI-Shop-Editor wie Fudge (kein Code, mehr Kontrolle)
Fudge liegt genau dazwischen. Du beschreibst in einfachen Worten, was du willst, und Fudge generiert die Codeänderungen direkt in deinem Theme. Zuerst werden Entwürfe erstellt – nichts geht live, bis du es überprüft und genehmigt hast.
Für kleinere Bearbeitungen siehe Wie man Text auf jeder Seite in Shopify bearbeitet und Wie man Farben und Schriftarten in Shopify aktualisiert.
So nutzt du den Shopify Theme Editor
Wo du ihn findest: Shopify Admin → Onlineshop → Themes → klicke bei deinem aktiven Theme auf „Anpassen“.
Du siehst dann rechts eine Live-Vorschau deines Stores und links eine Seitenleiste mit deinen Abschnitten (Sections) und Einstellungen.
Was du ändern kannst
- Farben und Schriftarten – globale Farbschemata und Typografie, die für deinen gesamten Shop gelten
- Abschnitte (Sections) – füge Abschnitte auf jeder Seite hinzu, entferne, verschiebe oder blende sie aus
- Blöcke (Blocks) – bearbeite einzelne Elemente innerhalb von Abschnitten: Text, Bilder, Buttons, Überschriften
- Theme-Einstellungen – Logos, Favicons, Social-Media-Links
- App-Einbettungen (App Embeds) – verknüpfe kompatible Apps (Bewertungen, Chat, Badges), ohne den Code anzufassen
- Geräte-Vorschau – überprüfe, wie alles auf dem Smartphone und Tablet aussieht, bevor du es veröffentlichst
Was du nicht ändern kannst
Der Theme Editor ist auf das beschränkt, was dein Theme-Entwickler freigegeben hat.
Wenn die Option nicht im Editor ist, ist sie darüber auch nicht verfügbar. Benutzerdefinierte Layouts, neue Arten von Abschnitten und alles, was mit JavaScript zu tun hat, fallen aus dem Rahmen.
Für solche Änderungen brauchst du den Code-Editor – oder Fudge.
So bearbeitest du deinen Shopify-Theme-Code direkt
Wo du es findest: Shopify Admin → Onlineshop → Themes, klicke auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Code bearbeiten.
Dies öffnet einen Dateibrowser deines gesamten Themes. Hier siehst du, was die Hauptordner enthalten:
| Ordner | Was er macht |
|---|---|
assets/ | CSS-Stylesheets, JavaScript-Dateien, Schriftarten |
sections/ | Die modularen Blöcke, die du im Theme-Editor siehst |
templates/ | Seitenvorlagen – Produkt, Kategorie (Collection), Blog und andere |
layout/theme.liquid | Der globale Wrapper um jede Seite |
snippets/ | Wiederverwendbare Liquid-/HTML-Bausteine, die im gesamten Theme verwendet werden |
config/ | Schema der Theme-Einstellungen und gespeicherte Werte |
Der Code-Editor von Shopify hat Theme Check integriert – ein Linter, der Fehler in Echtzeit mit roten Unterstreichungen markiert. Er fängt nicht alles ab, aber eine ganze Menge.
Bevor du Code bearbeitest
Dupliziere dein Theme immer zuerst. Gehe zurück zur Themes-Seite, klicke auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Duplizieren. Das gibt dir ein Backup, das du sofort wiederherstellen kannst, falls etwas schiefgeht.
Wann es Sinn macht, Code zu bearbeiten
Die Bearbeitung des Codes lohnt sich, wenn du Liquid- oder CSS-Kenntnisse hast und eine gezielte, dir verständliche Änderung vornimmst – wie das Anpassen eines CSS-Wertes oder das Hinzufügen eines kleinen Snippets.
Bei allem, was komplexer ist – neue Abschnitte, neue Layouts, benutzerdefinierte Komponenten – steigt das Risiko schnell an, etwas kaputt zu machen.
Wie sich das im Vergleich zum Theme-Editor verhält, erfährst du beim Fudge Store-Editor.
So bearbeitest du dein Shopify-Theme mit Fudge
Fudge ist der KI-Operator für Shopify-Shops, und das Bearbeiten deines Themes ist eines der Dinge, die er kann. Anstatt Dateien manuell zu bearbeiten, beschreibst du, was du willst.
„Füge einen Vorher-/Nachher-Vergleichsabschnitt zu meiner Produktseite hinzu.“
„Erstelle eine Landingpage für unseren Sommer-Sale mit einem Hero-Banner und drei Feature-Blöcken.“
„Verschiebe den Größenberater über den In-den-Warenkorb-Button.“
Fudge generiert die Änderungen als Entwurf – natives Shopify Liquid, HTML und CSS, das sich direkt in dein Theme integriert. Du überprüfst, was gemacht wurde. Nichts geht live, bis du es genehmigt hast.
Jede veröffentlichte Änderung behält die Version, die sie ersetzt hat, sodass du sie rückgängig machen kannst. Außerdem zeigt Fudge dir die Zahlen auf den geänderten Seiten, bevor und nachdem die Änderung live ging.
Was das von einem Page Builder unterscheidet
Die meisten Page Builder Apps erstellen Seiten in ihrem eigenen System, getrennt von deinem Theme. Das kann deinen Shop verlangsamen und schafft eine langfristige Abhängigkeit von der App.
Fudge schreibt direkt in dein Shopify-Theme. Falls du jemals aufhörst Fudge zu nutzen, bleibt der Code erhalten. Dein Shop geht nicht kaputt. Und da dasselbe Tool auch Landingpages, Quizze, Pop-ups und Bundles erstellt, kann es mehrere spezialisierte Apps ersetzen, nicht nur einen Page Builder.
Wofür sich Fudge am besten eignet
- Individuelle Produktseiten-Layouts
- Kampagnen-Landingpages
- Conversion-Elemente – Countdown-Timer, Dringlichkeits-Banner, Produktvergleiche
- Jede Änderung, bei der der Theme-Editor nicht die Option bietet, die du brauchst
- Zuerst herausfinden, was man überhaupt ändern soll: Gib ein Ziel vor, wie z.B. mehr Conversions, und Fudge findet und bewertet die Möglichkeiten, bevor etwas gebaut wird
Häufige Änderungen – und der schnellste Weg dorthin
| Was du ändern möchtest | Schnellste Methode |
|---|---|
| Farben und Schriftarten | Theme Editor |
| Homepage-Abschnitte hinzufügen/verschieben | Theme Editor |
| Bilder und Logos austauschen | Theme Editor |
| Benutzerdefiniertes Produktseiten-Layout | Fudge |
| Kampagnen-Landingpage bauen | Fudge |
| Individuelles Conversion-Element hinzufügen | Fudge |
| Komplett neuer Abschnitts-Typ | Fudge oder Entwickler |
| Eigene Checkout-Logik | Entwickler |
Was kannst du 2026 ohne Entwickler bearbeiten?
Der Theme-Editor allein deckt Farben, Schriftarten, die Reihenfolge von Abschnitten, Bilder und die meisten Layout-Einstellungen ab. Für alltägliche visuelle Änderungen ist das genug.
Mit Fudge erweitert sich dieser Bereich erheblich. Individuelle Seitenlayouts, neue Abschnitte, Conversion-Elemente, Landingpages – alles ohne Code zu schreiben oder auf einen Entwickler zu warten.
Die Fälle, in denen du wirklich noch einen Entwickler brauchst, sind seltener geworden als früher: komplexe Drittanbieter-Integrationen, individuelle Checkout-Funktionen und sehr maßgeschneiderte interaktive Features.
Für alles andere – gibt es die Tools, um es selbst zu machen.
FAQ
Werden Shopify-Theme-Updates meine Anpassungen überschreiben?
Das kommt darauf an, was du bearbeitet hast. Theme-Einstellungen, Abschnitte und Inhalte, die über den Theme-Editor gespeichert wurden, bleiben bei Updates erhalten. Direkte Bearbeitungen an den Theme-Dateien (assets/, sections/, templates/) werden überschrieben, wenn du das Theme aktualisierst – Shopify behandelt Updates wie eine Neuinstallation. Um Code-Anpassungen zu erhalten, dokumentiere sie oder nutze Shopifys GitHub-Integration zur Versionskontrolle.
Sollte ich das Live-Theme direkt bearbeiten oder zuerst duplizieren?
Dupliziere immer zuerst, wenn du strukturelle Änderungen vornimmst (Code, das Löschen von Abschnitten, Template-Änderungen). Änderungen im Theme-Editor kannst du als Vorschau ansehen, ohne zu speichern. Das Duplizieren dauert 30 Sekunden und gibt dir einen vollständigen Wiederherstellungspunkt. Sobald die Bearbeitungen getestet sind, kannst du das modifizierte Theme als neues Live-Theme veröffentlichen.
Was ist der Unterschied zwischen dem Theme-Editor und dem Code-Editor?
Der Theme-Editor ist der visuelle Customizer – Drag-and-Drop von Abschnitten, Farben, Schriftarten, Inhalten. Der Code-Editor (Onlineshop → Themes → ... → Code bearbeiten) zeigt die zugrunde liegenden Liquid-/HTML-/CSS-/JS-Dateien. Änderungen im Theme-Editor sind händlerfreundlich und umkehrbar; Änderungen im Code-Editor können die Storefront kaputt machen, wenn sie falsch gemacht werden. Fudge liegt genau dazwischen: Beschreibe die Änderung in einfachen Worten und es generiert den Code (benutzerdefinierte Abschnitte, bedingte Logik, individuelle Layouts) als Entwurf, den du dir ansehen und genehmigen kannst – der händlerfreundliche Weg für Änderungen, die der Theme-Editor nicht machen kann.
Kann ich Theme-Änderungen nach dem Speichern rückgängig machen?
Der Theme-Editor hat nach dem Speichern keine Undo-Funktion, aber der Code-Editor behält ältere Versionen jeder Datei, einschließlich der Template-JSON, die die Einstellungen des Theme-Editors speichert. Öffne die Datei in „Code bearbeiten“ und wähle „Ältere Versionen“, um sie wiederherzustellen. Für eine vollständige Historie solltest du das Theme mit GitHub verbinden.
Werden durch die Bearbeitung meines Shopify-Themes meine Apps kaputtgehen?
App-Einbettungen (App Embeds) und die meisten modernen Apps koexistieren problemlos mit Theme-Bearbeitungen. Das Risiko ist am höchsten, wenn (1) du Abschnitte löschst, in die eine App Inhalte einfügt, (2) du App-Code-Blöcke während der Code-Bearbeitung entfernst, oder (3) dein Theme-Update von der App eingefügte Snippets rückgängig macht. Teste nach größeren Änderungen Apps, die die Storefront beeinflussen (Bewertungen, Suche, Warenkorb-Drawer).
