Was sich seit 2020 verändert hat
Theme-Bearbeiten heute hat mit Theme-Bearbeiten 2020 nicht mehr viel zu tun. Drei Verschiebungen sind dafür verantwortlich.
Online Store 2.0. Shopify hat 2021 die Theme-Architektur umgebaut (offiziell Online Store 2.0). Seitdem ist eine Shopify-Seite aus austauschbaren Bausteinen aufgebaut: Sections sind ganze Bereiche (zum Beispiel das Hero-Bild oben), Blocks sind kleinere Elemente innerhalb einer Section. Das gilt jetzt überall, nicht nur auf der Startseite. Was früher fest im Code stand, lässt sich heute per Einstellung anpassen, ohne Code anzufassen.
Dawn als Vorlage. Shopify pflegt mit Dawn ein offizielles, kostenloses Theme. Es zeigt aktuelle Best-Practices und ist offen einsehbar. Du kannst dir Lösungen daraus abgucken, ohne ein Premium-Theme zu kaufen.
KI-Werkzeuge fürs Code-Schreiben. Shopify-Themes sind in Liquid geschrieben. Das ist Shopifys eigene Vorlagen-Sprache, die Daten (zum Beispiel Produktnamen oder Preise) in HTML einfügt. Liquid ist gut dokumentiert und für KI-Tools wie Claude Code gut lesbar. Du beschreibst die gewünschte Änderung in deutschem Klartext, das Tool schreibt den Code. Das ist der Punkt, an dem viele Founder zum ersten Mal merken: Ich brauche keinen Dev mehr für das hier.
Was vorher zwei Tage Senior-Dev-Arbeit war, ist heute ein Satz an Claude.
Was du heute selbst kannst
Eine ehrliche Liste, sortiert von einfach nach mittelschwer.
Layout und Aufbau
- Sections (die Seiten-Bausteine) neu anordnen — funktioniert direkt im Shopify-Editor, ohne Code
- Neue Sections bauen (Hero-Bild, FAQ-Block, Trust-Streifen mit Versprechen, Kunden-Karussell)
- Eigene Seiten-Vorlagen hinzufügen (Landing-Page, Aktions-Seite, Bundle-Seite)
- Innenabstände, Außenabstände und Container-Breiten anpassen
Schrift und Farben
- Marken-Farben in den Theme-Einstellungen ändern (oder direkt in der Konfigurationsdatei
settings_data.json) - Eigene Schriften einbinden (im modernen Format woff2, mit dem CSS-Befehl
font-display: swap, damit Text sofort lesbar ist, auch wenn die Schrift noch lädt) - Überschriften-Hierarchie überarbeiten (Größen und Zeilenhöhen für H1, H2, H3)
- Fließtext-Schrift, Lesbarkeit und Schriftglättung (Antialiasing)
Conversion-relevante Bausteine
- Klebender "In den Warenkorb"-Button (auf englisch Sticky Add-to-Cart) auf der Produktseite — bleibt beim Scrollen sichtbar
- Warenkorb-Drawer mit Produktempfehlungen, der von der Seite einfährt
- Bundle-Auswahl mit automatischem Rabatt
- Versandkosten-Bar oben auf der Seite ("Noch 12 € bis zum kostenlosen Versand") — aktualisiert sich live mit dem Warenkorb
- Vertrauens-Symbole, Bewertungs-Anzeigen, Garantie-Hinweise
SEO und Metadaten
- Title- und Description-Templates pro Page-Type
- Schema.org JSON-LD (Product, Organization, Breadcrumb, FAQ)
- Hreflang-Tags für Mehr-Länder-Shops (Hinweis im HTML, welche Seite die deutsche, österreichische oder Schweizer Version ist)
- Alternativtexte für Bilder automatisiert generieren (alt-Text — wichtig für Suche und Barrierefreiheit)
- Sitemap pflegen (Liste aller Seiten, die Google indexieren soll)
Übersetzungen
- Eigene Übersetzungs-Bausteine anlegen (in Shopify nennt sich das Translation-Keys — Platzhalter, die je nach Sprache anders gefüllt werden)
- Bestehende Texte überschreiben, ohne ins Theme-Code-File zu greifen
- Sprach-spezifische Logik (zum Beispiel andere Versandkosten in Österreich als in Deutschland)
Wenn du dir bei einem Punkt unsicher bist: BaseFlow kommt mit Beispiel-Workflows für jedes dieser Themen. Du wählst aus, Claude liest dein Theme und passt den Workflow auf deinen Code-Stand an.
Was du wirklich nicht selbst machen solltest
Es gibt Bereiche, in denen ein Senior-Dev nicht ersetzbar ist. Wenn du in einem davon landest, hör auf zu basteln und hol jemanden.
Wechsel auf Headless. Bei einem Headless-Setup baust du dein eigenes Frontend (zum Beispiel mit Shopifys Hydrogen-Framework) und nutzt Shopify nur noch als Backend. Das ist Software-Engineering, nicht mehr Theme-Editieren — und braucht einen Entwickler.
Anpassungen am Checkout (nur Shopify Plus). Checkout-Erweiterungen, Anpassungen an Shop Pay, eigene Steuer-Logik. Das ist rechtlich relevant — Fehler kosten hier viel mehr als Entwickler-Stunden.
Eigene Apps bauen. Wenn du Funktionen brauchst, die außerhalb deines Themes leben — also automatische Benachrichtigungen an externe Systeme (Webhooks), Anbindung an externe Schnittstellen (APIs) oder eine eigene Datenbank — dann brauchst du eine eigene App. Und Apps brauchen einen Entwickler.
Mehrere Shops koordinieren. Wenn du mehrere Shops betreibst und Bestände, Kundenkonten oder Bestellungen zwischen ihnen synchronisieren willst, ist das ein Architektur-Projekt — nichts, was im Theme allein lösbar ist.
Tiefe Performance-Optimierung. Wenn du LCP (den Geschwindigkeits-Wert für den größten sichtbaren Inhalt) unter 1,8 Sekunden drücken willst und die Theme-Optimierung am Limit ist, brauchst du jemanden, der mit Content-Delivery-Netzwerken (CDN), Bild-Pipelines und Caching-Strategien arbeiten kann.
Der sichere Workflow in drei Schritten
Egal ob du Code-Profi bist oder zum ersten Mal in eine Liquid-Datei schaust: dieser Workflow schützt dein Live-Theme. Wenn du ihn einhältst, kann praktisch nichts passieren, was sich nicht in fünf Minuten rückgängig machen ließe.
Schritt 1: Eine Kopie deines Themes anlegen
Im Shopify Admin gehst du auf Online Store → Themes. Bei deinem aktiven Theme klickst du auf Actions → Duplicate. Du bekommst eine identische Kopie — Shopify nennt sie automatisch Copy of [Theme-Name]. Benenne sie um, damit du später weißt, woran du gearbeitet hast. Beispiel: vorflows-edit-2026-05-10.
Diese Kopie ist ab jetzt dein Arbeitstheme. Alle Änderungen passieren hier — dein Live-Theme im Shop bleibt unangetastet.
Schritt 2: Änderung beschreiben und ausführen lassen
Mit Claude Code und der BaseFlow-Setup-Datei läuft das so ab:
- Du verbindest Claude mit der Theme-Kopie (einmal pro Sitzung)
- Du beschreibst die Änderung in einem Satz: "Bau eine klebende 'In den Warenkorb'-Leiste mit Produktbild, Varianten-Auswahl und Mengenwahl."
- Claude liest das Theme, schreibt die nötigen Code-Dateien und zeigt dir die Änderungen als Vergleich (englisch Diff) — du siehst genau, was hinzukommt, was sich ändert, was wegfällt
Ohne Claude machst du dasselbe von Hand: Section-Datei schreiben, Einstellungs-Schema definieren, im Theme-Editor einbinden. Dauert deutlich länger und setzt voraus, dass du Liquid lesen und schreiben kannst.
Schritt 3: Vorschau prüfen und manuell live schalten
Shopify gibt dir für jedes Theme einen Vorschau-Link (Preview). Öffne ihn auf Desktop und Mobile. Klicke dich durch die wichtigsten Seiten: Startseite, Kategorie, Produktseite, Warenkorb, Checkout. Alles, was von deiner Änderung betroffen sein könnte.
Erst wenn die Vorschau okay aussieht, gehst du auf Actions → Publish. Das Live-Theme wechselt in dieser Sekunde. Fällt dir nach dem Live-Schalten doch etwas auf, klickst du beim alten Theme (jetzt als "Previously published" markiert) erneut auf Actions → Publish — Rückkehr in 10 Sekunden.
Ich habe in den letzten zwei Jahren keinen einzigen Founder gesehen, der mit diesem Workflow seinen Live-Shop kaputt gemacht hat. Die wenigen, die einen Schreckmoment hatten, folgten immer demselben Muster: direkt am Live-Theme oder per Auto-Sync ohne Review. Beides vermeidbar.
Was du an Tools brauchst
Die Liste ist kürzer, als du denkst. Zur schnellen Orientierung:
| Status | Tool | Wofür |
|---|---|---|
| Pflicht | Shopify Admin-Zugang | Theme-Edit-Rechte, Theme-Duplicate, Publish |
| Pflicht | Claude Code | Liest dein Theme, schreibt Liquid auf Duplicate |
| Pflicht | Moderner Browser | Preview-Tests auf Desktop und Mobile |
| Empfohlen | Shopify CLI | Lokale Theme-Sync wenn du in mehreren Files parallel editierst |
| Empfohlen | VS Code + Liquid-Extension | Syntax-Highlighting, auch wenn Claude den Code schreibt |
| Empfohlen | BaseFlow-Setup-Datei | Gibt Claude die Shopify-Skills, die im Standard-Stack fehlen. Setup 20–30 Min |
| Skip | Theme-Builder-App | Online Store 2.0 reicht — Sections und Blocks sind nativ |
| Skip | Section-Editor-App | Doppelt zu Online Store 2.0, zusätzliche Subscription |
| Skip | Theme-Customizer-Subscription | Settings-Schema kann das alles ohne Abo |
Häufige Fehler und wie du sie vermeidest
Direkt am Live-Theme arbeiten, "schnell mal"
Der häufigste und teuerste Fehler. Du machst eine "schnelle Anpassung" direkt am Live-Theme, weil dich das Kopieren nervt. Dann kollidiert ein Liquid-Tippfehler mit einer App, und der Shop ist zehn Minuten nicht erreichbar. Ist mir selbst passiert. Einmal.
Die Lektion: Eine Theme-Kopie ist kein zusätzlicher Aufwand — sie ist deine Versicherung.
Automatisches Live-Schalten aktivieren
Manche Tools bieten an, Theme-Änderungen automatisch live zu schieben (Auto-Deploy). Lass das aus. Du willst den Moment des Live-Schaltens immer manuell auslösen — mit der Vorschau im Browser-Tab daneben.
Einstellungs-Schema vergessen
Du baust eine schöne neue Section, schreibst aber Texte und Farben fest in den Code. Beim nächsten Theme-Update ist alles wieder weg. Lösung: Texte und Farben über das Einstellungs-Schema (Settings-Schema) anbieten — dann bleiben deine Werte erhalten, und du kannst sie später im Shopify-Editor ändern, ohne ins Code-File zu gehen. Fünf Minuten Mehrarbeit, später Stunden gespart.
Übersetzungen vergessen
Wenn dein Shop mehrsprachig ist und du einen neuen Text fest in eine Section schreibst (statt einen Übersetzungs-Platzhalter zu verwenden), bricht beim nächsten Sprachwechsel die Anzeige. Nutze stattdessen das Translation-Pattern {{ 'general.shipping_bar.text' | t }} und legst die Texte je Sprache in der jeweiligen Locale-Datei (z. B. locales/de.default.json) ab.
JavaScript ohne "defer" laden
Eigene Scripts im <head> ohne den Hinweis defer oder async blockieren das Laden der Seite und ruinieren den Geschwindigkeits-Wert LCP. Lösung: defer setzen (Script lädt parallel und führt erst aus, wenn die Seite fertig geladen ist) — oder das Script ans Ende der Seite packen.
BaseFlow gibt dir den kompletten Workflow.
Setup-Datei, Skill-Stack, Section-Library, Installations-Videos. Du arbeitest ab Tag eins auf Senior-Dev-Niveau, ohne den Senior-Dev.
Wann du trotzdem einen Dev hinzuziehst
Es gibt Momente, in denen ich Foundern empfehle, einen Profi zu holen. Hier sind die Signale, die dir helfen zu entscheiden.
- Du brauchst eine eigene App. Funktionen, die außerhalb des Themes leben — automatisierte Benachrichtigungen an externe Systeme (Webhooks), Anbindung an externe Schnittstellen (APIs), eigene Datenbanken. Das gehört nicht ins Theme.
- Rechtliche Themen. DSGVO-Tracking-Setups, automatisierte Datenexporte, Steuer-Logik bei Cross-Border-Verkäufen. Hol jemanden mit Erfahrung.
- Mehrere Shops koordinieren. Wenn du drei Shops betreibst und Kundenkonten oder Bestände zwischen ihnen synchronisieren willst, ist das ein Architektur-Projekt.
- Geschwindigkeits-Limit erreicht. Wenn dein PageSpeed-Wert trotz Theme-Optimierung unter 80 bleibt, liegt der Engpass tiefer (Bilder, CDN, Server-Antwortzeit).
- Du baust etwas, das langfristig dokumentiert sein muss. Wenn du den Code in einem Jahr an jemanden übergibst, der nicht mit Claude arbeitet, brauchst du sauber kommentierten Code — nicht reinen KI-Output.
In allen anderen Fällen lohnt sich der Dev nicht mehr. Du bezahlst nicht für Code-Output, sondern für Wartezeit, Briefing-Zeit und Stundensatz auf eine Aufgabe, die du in einem Bruchteil der Zeit selbst erledigt hättest.
FAQ
Was kann ich am Shopify-Theme selbst ändern?
Layout, neue Sections, Section-Reihenfolge, CTAs, Typografie, Farben, Liquid-Logik in bestehenden Sections, Schema, Meta-Tags, Snippets und einfache JS-Komponenten. Mit Claude Code und einer Setup-Datei deckst du damit den Großteil aller realen Anpassungs-Wünsche ab.
Wann brauche ich noch einen Developer?
Bei Headless-Architektur, Custom-Apps, Plus-Checkout-Extensions, Multi-Store-Setups oder Performance-Eingriffen unterhalb der Theme-Ebene. Die Stop-Schilder oben in diesem Artikel listen die typischen Signale.
Wie verhindere ich, dass ich mein Live-Theme zerstöre?
Zwei Regeln: Arbeite immer auf einem Theme-Duplicate, niemals direkt am Live. Publishe manuell, niemals per Auto-Deploy. Diese zwei Regeln allein lösen 95 Prozent aller Theme-Unfälle.
Funktioniert das auch mit Premium-Themes wie Impulse oder Prestige?
Ja. Premium-Themes nutzen den gleichen Liquid-Standard wie Dawn. Mehr Settings und mehr Sections machen die Editierung sogar einfacher. Claude Code mit der BaseFlow-Setup-Datei liest jedes Theme ein und passt sich dem Code-Stand an.
Wie lange dauert es, bis ich produktiv bin?
Setup mit BaseFlow ist 20 bis 30 Minuten. Erste reale Section am gleichen Tag. Komfortable, eigene Arbeitsweise nach ein bis zwei Wochen, in denen du drei bis fünf typische Aufgaben durchgespielt hast.
Was, wenn Claude eine Änderung vorschlägt, die ich nicht verstehe?
Dann fragst du nach. Claude erklärt jede Zeile in deutscher Sprache, mit Begründung. Wenn du am Ende immer noch nicht sicher bist, ist das ein Hinweis: das war vielleicht doch ein Dev-Job. Aber das ist selten.