Wichtige Erkenntnisse
- Es gibt drei Möglichkeiten, 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 eine einzige Zeile Code zu schreiben.
- Die direkte Bearbeitung des Theme-Codes gibt Ihnen die volle Kontrolle, erfordert jedoch Liquid- und CSS-Kenntnisse und birgt das Risiko, Fehler zu verursachen.
- Mit Fudge beschreiben Sie einfach auf Englisch, was Sie möchten, und es generiert den Code für Sie – nichts geht live, bevor Sie es genehmigen.
- Die meisten Händler können 80 % der Shop-Änderungen im Jahr 2026 selbst vornehmen, ohne einen Entwickler.
Das Bearbeiten Ihres Shopify-Themes bedeutete früher eines von zwei Dingen: In einem eingeschränkten Editor herumzuklicken oder den Job an einen Entwickler zu übergeben.
Das hat sich geändert.
Es gibt jetzt drei verschiedene Möglichkeiten, ein Shopify-Theme zu bearbeiten, die jeweils für unterschiedliche Anforderungen geeignet sind. Dieser Leitfaden führt Sie durch alle drei – was sie tun, wann man sie einsetzt und wie man sie nutzt.
Warum Sie uns vertrauen können
Jacques verfügt über mehr als 15 Jahre Erfahrung in der Softwareentwicklung und hat mit vielen Shopify-Marken an deren Storefronts gearbeitet. Wir sind seit vier Jahren im Shopify-Ökosystem tätig und arbeiten direkt mit Hunderten von Händlern zusammen. Wir haben auch Fudge entwickelt – einen KI-Storefront-Editor, der von Hunderten von Shopify-Shops genutzt wird und im Shopify App Store mit 5,0 bewertet wurde.
Die 3 Wege, ein Shopify-Theme zu bearbeiten
Nicht alle Theme-Bearbeitungen sind gleich. Die Methode, die Sie verwenden, sollte zu dem passen, was Sie ändern möchten.
1. Der Shopify Theme-Editor (ohne Code)
Dies ist der integrierte visuelle Editor von Shopify. Er deckt die meisten alltäglichen Änderungen ab – Farben, Schriftarten, Reihenfolge der Abschnitte, Bilder, Layout-Optionen – mit einer Live-Vorschau während der Bearbeitung.
Kein Code erforderlich. Jeder in Ihrem Team kann ihn benutzen.
2. Der Shopify Code-Editor (für Entwickler)
Shopify gibt Ihnen außerdem direkten Zugriff auf die Liquid-, HTML-, CSS- und JavaScript-Dateien Ihres Themes. Dies ermöglicht alles – erfordert jedoch technisches Wissen, und ein Fehler kann Ihre Storefront beschädigen.
Die meisten Händler müssen diesen Bereich nie nutzen.
3. Ein KI-Storefront-Editor wie Fudge (kein Code, mehr Kontrolle)
Fudge liegt genau dazwischen. Du beschreibst in einfachen Worten, was du möchtest, und Fudge generiert die Code-Änderungen direkt in deinem Theme. Zuerst werden Entwürfe erstellt – nichts geht live, bevor du es nicht überprüft und freigegeben hast.
Dieser Ansatz gibt nicht-technischen Händlern eine Kontrolle, die normalerweise Entwicklern vorbehalten ist.
Falls du das noch nicht eingerichtet hast, beginne mit Text auf einer beliebigen Shopify-Seite bearbeiten.
Falls du das noch nicht eingerichtet hast, beginne mit Farben und Schriftarten in Shopify aktualisieren.
So nutzen Sie den Shopify Theme-Editor
Wo Sie ihn finden: Shopify Admin → Onlineshop → Themes → klicken Sie bei Ihrem aktiven Theme auf „Anpassen“.
Sie sehen rechts eine Live-Vorschau Ihres Shops und links eine Seitenleiste, in der Ihre Abschnitte und Einstellungen aufgelistet sind.
Was Sie ändern können
- Farben und Schriftarten – globale Farbschemata und Typografie, die für Ihren gesamten Shop gelten
- Abschnitte – Abschnitte auf jeder Seite hinzufügen, entfernen, neu anordnen oder ausblenden
- Blöcke – einzelne Elemente innerhalb von Abschnitten bearbeiten: Text, Bilder, Buttons, Überschriften
- Theme-Einstellungen – Logos, Favicons, Social-Links, Checkout-Branding
- App-Einbettungen – kompatible Apps verbinden (Bewertungen, Chat, Badges), ohne den Code anzufassen
- Gerätevorschau – prüfen Sie vor der Veröffentlichung, wie alles auf dem Handy und Tablet aussieht
Was Sie nicht ändern können
Der Theme-Editor beschränkt sich auf das, was der Theme-Entwickler freigegeben hat.
Wenn die Option nicht im Editor vorhanden ist, ist sie darüber auch nicht verfügbar. Benutzerdefinierte Layouts, neue Abschnittstypen und alles, was JavaScript beinhaltet, fallen nicht in seinen Bereich.
Für diese Änderungen benötigen Sie den Code-Editor – oder Fudge.
So bearbeiten Sie Ihren Shopify-Theme-Code direkt
Wo Sie ihn finden: Shopify Admin → Onlineshop → Themes → Aktionen (drei Punkte) → Code bearbeiten.
Dies öffnet einen Browser mit allen Dateien Ihres Themes. Hier ist der Inhalt der Hauptordner:
| Ordner | Funktion |
|---|---|
assets/ | CSS-Stylesheets, JavaScript-Dateien, Schriftarten |
sections/ | Die modularen Blöcke, die Sie im Theme-Editor sehen |
templates/ | Seitenvorlagen – Produkt, Kollektion, Blog und andere |
layout/theme.liquid | Das globale Grundgerüst um jede Seite |
snippets/ | Wiederverwendbare Liquid/HTML-Bausteine |
config/ | Schema der Theme-Einstellungen und gespeicherte Werte |
Der Code-Editor von Shopify verfügt über einen integrierten Theme-Check – ein Tool, das Fehler in Echtzeit mit roten Unterstreichungen markiert. Es findet nicht alles, aber sehr viel.
Bevor Sie Code bearbeiten
Duplizieren Sie immer zuerst Ihr Theme. Gehen Sie zurück zur Theme-Seite, klicken Sie auf Aktionen → Duplizieren. So erhalten Sie ein Backup, das Sie sofort wiederherstellen können, falls etwas schiefgeht.
Wann eine Code-Bearbeitung sinnvoll ist
Die direkte Code-Bearbeitung lohnt sich, wenn du Liquid- oder CSS-Kenntnisse hast und eine gezielte, klar definierte Änderung vornehmen möchtest – etwa einen CSS-Wert anpassen oder ein kleines Snippet hinzufügen.
Bei allem, was darüber hinausgeht – neue Abschnitte, neue Layouts, benutzerdefinierte Komponenten – steigt das Risiko, dass etwas kaputt geht, schnell an.
Mehr dazu: Fudge Store Editor.
Mehr dazu: Shopify Sidekick nutzen.
Mehr dazu: Benutzerdefiniertes JavaScript in Shopify hinzufügen.
Mehr dazu: Blöcke zu einem Shopify-Abschnitt hinzufügen.
So bearbeiten Sie Ihr Shopify-Theme mit Fudge
Fudge ist ein KI-Storefront-Editor, der speziell für Shopify entwickelt wurde. Anstatt Dateien manuell zu bearbeiten, beschreiben Sie einfach, was Sie wollen.
„Füge meiner Produktseite einen Vorher-Nachher-Vergleich hinzu.“
„Erstelle eine Landingpage für unseren Sommer-Sale mit einem Hero-Banner und drei Feature-Blöcken.“
„Verschiebe die Größentabelle über den In-den-Warenkorb-Button.“
Fudge generiert die Änderungen als Entwurf – natives Shopify Liquid, HTML und CSS, das sich direkt in Ihr Theme integriert. Sie überprüfen das Ergebnis. Nichts geht live, bevor Sie es genehmigen.
Was ist der Unterschied zu einem Page Builder?
Die meisten Page-Builder-Apps erstellen Seiten in ihrem eigenen System, getrennt von Ihrem Theme. Das kann Ihren Shop verlangsamen und erzeugt eine dauerhafte Abhängigkeit von der App.
Fudge schreibt direkt in Ihr Shopify-Theme. Wenn Sie Fudge irgendwann nicht mehr nutzen, bleibt der Code erhalten. Ihr Shop funktioniert weiterhin einwandfrei.
Wofür Fudge am besten geeignet ist
- Benutzerdefinierte Layouts für Produktseiten
- Kampagnen-Landingpages
- Conversion-Elemente – Countdown-Timer, Dringlichkeits-Banner, Produktvergleiche
- Jede Änderung, für die der Theme-Editor keine Option bietet
Häufige Änderungen – und der schnellste Weg für jede
| Was Sie ändern möchten | Schnellste Methode |
|---|---|
| Farben und Schriftarten | Theme-Editor |
| Homepage-Abschnitte hinzufügen/verschieben | Theme-Editor |
| Bilder und Logos austauschen | Theme-Editor |
| Individuelles Layout der Produktseite | Fudge |
| Eine Kampagnen-Landingpage erstellen | Fudge |
| Ein Conversion-Element hinzufügen | Fudge |
| Neuer Abschnittstyp von Grund auf | Fudge oder Entwickler |
| Benutzerdefinierte Checkout-Logik | Entwickler |
Was können Sie im Jahr 2026 ohne Entwickler bearbeiten?
Mehr als die meisten Händler denken.
Allein der Theme Editor deckt Farben, Schriftarten, die Reihenfolge von Abschnitten, Bilder und die meisten Layout-Einstellungen ab. Für alltägliche optische Anpassungen ist das völlig ausreichend.
Mit Fudge erweitert sich dieser Spielraum enorm. Benutzerdefinierte Seitenlayouts, neue Abschnitte, Conversion-Elemente, Landing Pages – alles, ohne Code schreiben oder auf einen Entwickler warten zu müssen.
Fälle, in denen man wirklich noch einen Entwickler braucht, sind viel seltener geworden als früher: komplexe Drittanbieter-Integrationen, individuelle Checkout-Funktionen und hochgradig maßgeschneiderte interaktive Features.
Für alles andere gilt: Die Tools sind da, um es selbst zu machen.
FAQ
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 Änderungen an Theme-Dateien (assets/, sections/, templates/) werden überschrieben, wenn du das Theme aktualisierst – Shopify behandelt Updates wie eine Neuinstallation. Um Code-Änderungen zu behalten, dokumentiere sie oder nutze die GitHub-Integration von Shopify zur Versionskontrolle.
Bei strukturellen Änderungen (Code, Löschen von Abschnitten, Template-Änderungen) solltest du immer zuerst duplizieren. Änderungen im Theme Editor kannst du in der Vorschau ansehen, ohne zu speichern. Das Duplizieren dauert 30 Sekunden und gibt dir einen vollständigen Wiederherstellungspunkt. Sobald die Änderungen getestet sind, kannst du das angepasste Theme als neues Live-Theme veröffentlichen.
Der Theme Editor ist der visuelle Customizer – Drag-and-Drop für Abschnitte, Farben, Schriften, Inhalte. Der Code-Editor (Onlineshop → Themes → Aktionen → Code bearbeiten) zeigt die zugrundeliegenden Liquid/HTML/CSS/JS-Dateien. Änderungen im Theme Editor sind händlerfreundlich und umkehrbar; Fehler im Code-Editor können deine Storefront zerschießen. Fudge setzt genau dazwischen an: Beschreibe die Änderung in einfachen Worten und das Tool generiert den Code (benutzerdefinierte Abschnitte, bedingte Logik, individuelle Layouts) als Entwurf, den du in der Vorschau ansehen und freigeben kannst – der händlerfreundliche Weg für Änderungen, bei denen der Theme Editor an seine Grenzen stößt.
Änderungen im Theme Editor werden ohne Historie gespeichert – du kannst eine gespeicherte Änderung nicht rückgängig machen (Rollback), es sei denn, du hast ein Duplikat des vorherigen Themes. Code-Änderungen haben ebenfalls keinen integrierten Verlauf. Die GitHub-Integration von Shopify bietet eine Versionskontrolle für Shops, die eine echte Rückgängig-Funktion wollen.
App-Embeds und die meisten modernen Apps vertragen sich reibungslos mit Theme-Änderungen. Das Risiko ist am größten, wenn du (1) Abschnitte löschst, in die eine App Inhalte einfügt, (2) App-Codeblöcke während einer Code-Bearbeitung entfernst oder (3) ein Theme-Update die von einer App eingefügten Code-Snippets wieder rückgängig macht. Teste nach größeren Änderungen immer die Apps, die dein Storefront betreffen (Bewertungen, Suche, Warenkorb-Drawer).
