Die wichtigsten 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 Anpassungen – Farben, Schriftarten, Abschnitte – ohne dass du eine einzige Zeile Code schreiben musst.
- Den Theme-Code direkt zu bearbeiten, gibt dir die volle Kontrolle, erfordert aber Liquid- und CSS-Kenntnisse und birgt das echte Risiko, etwas kaputt zu machen.
- Mit Fudge kannst du in einfachen Worten beschreiben, was du möchtest, und es generiert den Code für dich – nichts geht live, bis du es freigibst.
- Die meisten Händler können 2026 80 % der Shop-Änderungen ohne Entwickler selbst durchführen.
Die Bearbeitung deines 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 Wege, ein Shopify-Theme zu bearbeiten, die jeweils für unterschiedliche Arten von Änderungen geeignet sind. Dieser Leitfaden führt dich durch alle drei – was jeder kann, wann man ihn benutzt und wie es jeweils funktioniert.
Warum Sie uns vertrauen können
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 aktiv und arbeiten direkt mit Hunderten von Händlern zusammen. Wir haben außerdem Fudge entwickelt – einen KI-Storefront-Editor, der von Hunderten von Shopify-Shops genutzt wird und eine Bewertung von 4.9 im Shopify App Store hat.
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 du ihn findest: Shopify Admin → Onlineshop → Themes → Aktionen → Code bearbeiten.
Dadurch öffnet sich ein Dateibrowser für dein gesamtes Theme. Hier ist eine Übersicht, was die wichtigsten Ordner enthalten:
| Ordner | Was er macht |
|---|---|
assets/ | CSS-Stylesheets, JavaScript-Dateien, Schriftarten |
sections/ | Die modularen Blöcke, die du im Theme-Editor siehst |
templates/ | Seitenvorlagen – Produkte, Kategorien (Collections), Blog und andere |
layout/theme.liquid | Der globale Wrapper für jede Seite |
snippets/ | Wiederverwendbare Liquid/HTML-Bausteine, die im gesamten Theme verwendet werden |
config/ | Theme-Einstellungen-Schema und gespeicherte Werte |
Der Code-Editor von Shopify hat Theme Check integriert – ein Linter, der Fehler in Echtzeit mit roten Unterstreichungen markiert. Er findet nicht alles, aber schon eine ganze Menge.
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 du ändern möchtest | Schnellste Methode |
|---|---|
| Farben und Schriftarten | Theme-Editor |
| Startseiten-Abschnitte hinzufügen oder neu anordnen | Theme-Editor |
| Bilder und Logos austauschen | Theme-Editor |
| Individuelles Produktseiten-Layout | Fudge |
| Kampagnen-Landingpage erstellen | Fudge |
| Individuelles Conversion-Element hinzufügen | Fudge |
| Neuen Abschnitt-Typen von Grund auf erstellen | Fudge oder Entwickler |
| Benutzerdefinierte Checkout-Logik | Entwickler |
Was kannst du 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 visuelle Änderungen ist das völlig ausreichend.
Mit Fudge erweitert sich dieser Spielraum erheblich. Benutzerdefinierte Seitenlayouts, neue Abschnitte, Conversion-Elemente, Landingpages – alles, ohne Code zu schreiben oder auf einen Entwickler warten zu müssen.
Die Fälle, in denen du wirklich noch einen Entwickler brauchst, sind seltener geworden als früher: komplexe Drittanbieter-Integrationen, benutzerdefinierte Checkout-Funktionen und hochgradig individuelle, 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-Anpassungen zu erhalten, solltest du sie dokumentieren oder die GitHub-Integration von Shopify zur Versionskontrolle nutzen.
Dupliziere es immer zuerst, wenn du strukturelle Änderungen vornimmst (Code, das Löschen von Abschnitten, Template-Änderungen). Änderungen im Theme-Editor kannst du dir in der Vorschau ansehen, ohne sie zu speichern. Das Duplizieren dauert 30 Sekunden und gibt dir einen vollständigen Wiederherstellungspunkt. Sobald die Anpassungen getestet sind, kannst du das geänderte Theme als das neue Live-Theme veröffentlichen.
Der Theme-Editor ist der visuelle Customizer — Drag-and-Drop für Abschnitte, Farben, Schriftarten, 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 rückgängig zu machen; Änderungen im Code-Editor können den Shop kaputt machen, wenn sie falsch gemacht werden. Fudge sitzt genau dazwischen: Beschreibe die Änderung in einfachen Worten und es generiert den Code (benutzerdefinierte Abschnitte, bedingte Logik, individuelle Layouts) als Entwurf, den du dir in der Vorschau ansehen und freigeben kannst — der händlerfreundliche Weg für Änderungen, die der Theme-Editor nicht machen kann.
Änderungen im Theme-Editor werden automatisch ohne Versionsverlauf gespeichert — du kannst eine gespeicherte Änderung nicht rückgängig machen, es sei denn, du hast ein Duplikat des vorherigen Themes. Änderungen im Code-Editor haben ebenfalls keine integrierte Historie. Die GitHub-Integration von Shopify bietet Versionskontrolle für Shops, die einen echten Verlauf zum Rückgängigmachen wollen.
App-Embeds und die meisten modernen Apps funktionieren problemlos mit Theme-Anpassungen zusammen. 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 Apps eingefügte Snippets rückgängig macht. Teste nach größeren Anpassungen alle Apps, die das Frontend betreffen (Bewertungen, Suche, Warenkorb-Drawer).
