Shopify Liquid: Theme-Code anpassen, ohne den Shop zu zerschießen

Dieser Artikel ist für dich, wenn du dein Shopify-Theme über den Editor hinaus anpassen willst, mit Liquid liebäugelst oder entscheiden musst, ob du einen Entwickler brauchst. Du erfährst, was Shopify Liquid kann und was nicht, wie du Code sicher änderst und wann Headless sinnvoll ist. Den Überblick über Theme, Apps und Tracking findest du im Hub Shopify-Design und Technik.

Die fünf Stufen der Anpassung

Nicht jede Änderung braucht Code. Shopify selbst rät im Help Center, den Theme-Code nur zu bearbeiten, wenn sich eine Änderung nicht mit einer App oder dem Theme-Editor umsetzen lässt. Arbeite dich deshalb von oben nach unten durch:

Die meisten Shops im DACH-Raum kommen mit Stufe 1 bis 3 aus. Wie du mit dem Editor arbeitest, zeigt der Artikel Shopify-Theme anpassen. Welche Basis du wählst, entscheidet mit darüber, wie viel Code du später brauchst. Dazu mehr im Artikel Shopify-Theme wählen.

Was Liquid ist und was es nicht kann

Liquid ist eine Template-Sprache. Sie läuft auf den Servern von Shopify, liest Daten wie Produkte, Kollektionen, Warenkorb oder Metafelder und gibt daraus HTML aus. Du kannst damit Bedingungen, Schleifen und Filter schreiben, etwa „zeige diesen Hinweis nur bei Produkten mit dem Tag Sperrgut“.

Was Liquid nicht kann: Daten speichern, eigene Datenbankabfragen ausführen oder Formulare serverseitig verarbeiten wie PHP. Wer aus WordPress kommt, sucht das oft vergeblich. Für Formulare nutzt du die eingebauten Shopify-Formulare (Kontakt, Newsletter, Kundenkonto), zusätzliche Felder im Kontaktformular oder eine App. Für Logik, die Daten schreibt oder externe Systeme anspricht, brauchst du eine App mit eigenem Backend oder Shopify Flow. Daher die häufige Frage „Wenn ich alles selbst programmiere, wozu dann Shopify?“: Shopify übernimmt Hosting, Checkout, Zahlungen, Sicherheit und Admin. Liquid steuert nur die Darstellung.

Für Liquid brauchst du HTML und CSS als Grundlage, etwas JavaScript für interaktive Elemente. React brauchst du für normale Themes nicht, erst für Headless-Projekte oder App-Entwicklung.

Benutzerdefiniertes Liquid: Code ohne Code-Editor

Die kostenlosen Shopify-Themes wie Dawn bringen im Theme-Editor in der Regel einen Abschnitt „Benutzerdefiniertes Liquid“ (englisch „Custom Liquid“) mit, viele andere Themes ebenfalls. Dort fügst du Liquid, HTML und CSS direkt an einer Stelle ein, auf jeder Seite, auch auf Landingpages. Der Vorteil: Das Snippet ist eine Einstellung im Editor, keine Änderung an den Theme-Dateien. Es übersteht Updates und lässt sich mit einem Klick entfernen.

Typische Einsätze:

• Ein Metafeld auf der Produktseite anzeigen, etwa Pflegehinweise oder Herstellerangaben nach GPSR: {{ product.metafields.custom.pflegehinweis }}
• Einen Hinweis nur für bestimmte Produkte: {% if product.tags contains 'sperrgut' %}Versand per Spedition{% endif %}
• Ein eigenes kleines Anfrageformular mit Zusatzfeld, etwa „Bestellnummer“: Shopify-Kontaktformulare übernehmen Felder mit dem Namen contact[Bestellnummer]. Ein Feld im bestehenden Kontaktformular-Abschnitt zu ergänzen, ist dagegen schon eine Änderung am Theme-Code.
• Ein Video oder ein externes Widget einbetten, das kein eigener Block ist.

Wenn im Feld plötzlich Code sichtbar auf der Seite steht, fehlt meist ein schließendes Tag oder du hast Text außerhalb eines HTML-Elements eingefügt. Leere das Feld komplett und füge den Code neu ein. Für Tracking-Codes nutze den Abschnitt nicht: Pixel gehören in die Kundenereignisse oder die offiziellen Kanäle. Wie das geht, steht im Artikel Tracking in Shopify einrichten.

Theme-Code sicher bearbeiten

Den Code-Editor findest du im Admin unter „Onlineshop > Themes“: Beim gewünschten Theme auf das Menü mit den drei Punkten klicken und „Code bearbeiten“ wählen. So gehst du vor, ohne deinen Live-Shop zu gefährden:

1. Theme duplizieren. Shopify empfiehlt das ausdrücklich als Backup. Bearbeite die Kopie, nicht das veröffentlichte Theme.
2. In der Vorschau testen. Die Kopie kannst du in der Vorschau prüfen, auch mobil, bevor du sie veröffentlichst.
3. Änderungen kommentieren. Markiere jede eigene Stelle im Code mit einem Kommentar wie „Anpassung Oktober 2026: Lieferzeit-Hinweis“. Das spart dir beim nächsten Update Stunden.
4. Chronik kennen. Der Editor speichert ältere Versionen einzelner Dateien. Darüber stellst du eine Datei wieder her. Gelöschte Dateien oder ein komplettes Theme holst du so nicht zurück, und der Verlauf ist begrenzt.
5. Keine Dateien löschen, deren Zweck du nicht kennst. Laut Shopify kann das Theme dadurch beschädigt werden.

Theme-Updates: Was mit deinen Änderungen passiert

Laut Shopify Help Center erstellt ein Theme-Update eine neue Kopie deines Themes. Alles, was du im Theme-Editor eingestellt hast, wird übernommen: Einstellungen, Abschnitte, Blöcke, Vorlagen und App-Einbettungen. Code-Änderungen werden nur übernommen, wenn sie nicht mit dem Update kollidieren; Änderungen im Ordner „Templates“ und an der Datei settings_data.json zählen dabei nicht. Shopify zeigt dir danach an, ob deine Code-Änderungen einbezogen werden konnten. Wenn nicht, musst du sie von Hand in die neue Version übertragen. Eigenes CSS solltest du nach jedem Update prüfen, weil sich Klassennamen ändern können.

Daraus folgt eine einfache Regel: Je mehr du über Editor-Einstellungen, benutzerdefiniertes Liquid und App-Blöcke löst, desto entspannter sind Updates. Viele Code-Eingriffe sind ein Grund, Updates aufzuschieben, und das kostet dich auf Dauer neue Funktionen und Fehlerbehebungen.

Lokal entwickeln: Shopify CLI, GitHub, Entwicklungsshop

Für mehr als ein paar Zeilen lohnt sich der Editor im Browser nicht. Entwickler arbeiten lokal, zum Beispiel in VS Code, mit der Shopify CLI. Mit ihr lädst du ein Theme herunter, siehst Änderungen per Live-Vorschau gegen echte Shopdaten und lädst sie wieder hoch. Liquid lässt sich nicht ohne Shopify ausführen. Die Vorschau läuft immer gegen einen Shop.

• Voraussetzung: Node.js und npm. Die CLI installierst du per npm.
• Windows: Wenn die PowerShell meldet, dass Skripte deaktiviert sind, liegt es an der Ausführungsrichtlinie von Windows, nicht an Shopify. Erlaube Skripte für deinen Benutzer oder nutze die Eingabeaufforderung. Wird „npm“ nicht erkannt, ist Node.js nicht installiert oder das Terminal wurde nach der Installation nicht neu gestartet.
• Zugriff: Du brauchst Mitarbeiter- oder Inhaberzugang mit Theme-Rechten. Für Kundenshops arbeiten Agenturen über Mitarbeiterkonten oder Partnerzugänge.
• GitHub: Themes lassen sich mit einem GitHub-Repository verbinden. Änderungen im Repository landen dann im Theme. Das ist sauber für Teams und Versionierung.
• Entwicklungsshop: Zum Lernen und Testen brauchst du keinen bezahlten Tarif. Über ein kostenloses Partner- bzw. Entwicklerkonto legst du Entwicklungsshops an.

Frameworks wie Tailwind oder Bootstrap kannst du einbinden, technisch ist das nur CSS. Bedenke aber: Ein zusätzliches Framework neben dem Theme-CSS macht die Seite schwerer und kann die Ladezeit verschlechtern, die für Shopify-SEO und Conversion zählt.

Headless mit Hydrogen: wann sinnvoll?

Headless heißt: Shopify liefert nur noch Daten und Checkout, das Frontend baust du komplett selbst. Shopifys eigenes Framework dafür ist Hydrogen, ein auf React Router aufbauendes Gerüst. Gehostet wird es auf Oxygen. Laut Shopify ist Oxygen auf den bezahlten Tarifen ohne Aufpreis verfügbar, also nicht nur bei Shopify Plus. Einen Shopify-Tarif sparst du mit Headless aber nicht. Du zahlst ihn weiter, plus Entwicklung.

Für wen es sich lohnt:

• Marken mit eigenem Entwicklerteam und Budget für laufende Wartung
• Projekte, bei denen Shopify nur ein Baustein ist, etwa neben einer App oder einem großen Content-Portal
• sehr spezielle Erlebnisse, die mit Themes nicht machbar sind

Für die meisten kleinen und mittleren Shops ist es die falsche Wahl. Du verlierst den Theme-Editor für Marketing-Änderungen, viele Apps funktionieren nur mit Online-Store-Themes, und jedes Detail muss programmiert werden. Shopify entwickelt parallel die Liquid-Themes weiter. Es gibt also keinen Grund zu glauben, dass Hydrogen Liquid bald ersetzt. Bestehende Shops bauen besser einzelne interaktive Bereiche mit JavaScript im Theme, statt alles neu zu bauen.

„Liquid error“ im Shop: so findest du die Ursache

Steht oben im Shop „Liquid error (internal)“ oder ein ähnlicher Fehler, ist fast immer eine Code-Stelle kaputt. Typische Ursachen und Lösungen:

1. Letzte Änderung rückgängig machen: Wer hat zuletzt Code geändert? Stell die betroffene Datei über die Chronik wieder her.
2. Reste deinstallierter Apps: Ältere Apps haben Snippets direkt in Theme-Dateien eingefügt. Nach der Deinstallation verweist der Code auf ein Snippet, das es nicht mehr gibt. Suche im Code nach dem App-Namen und entferne den Verweis, idealerweise mit Hilfe des App-Supports.
3. Benutzerdefiniertes Liquid prüfen: Blende eigene Liquid-Abschnitte testweise aus.
4. Auf ein Backup wechseln: Veröffentliche die zuletzt funktionierende Theme-Kopie, damit der Shop sofort wieder läuft, und such den Fehler in Ruhe.

Moderne Apps nutzen Theme-App-Erweiterungen: Sie fügen App-Blöcke und App-Einbettungen ein, die du im Editor steuerst, statt Theme-Dateien zu verändern. Achte bei der Auswahl darauf. Mehr dazu im Artikel Shopify-Apps für Anfänger.

Wann du einen Entwickler brauchst

Hol dir Hilfe, wenn mindestens einer dieser Punkte zutrifft: Die Änderung betrifft Warenkorb, Preise oder Produktlogik. Sie muss auf allen Geräten und in allen Sprachen funktionieren. Du hast mehr als zwei Stunden ohne Ergebnis gesucht. Oder es geht um eine Anbindung an externe Systeme wie eine Warenwirtschaft oder ein ERP. Wie du einen passenden Partner findest und was das kostet, steht im Artikel Shopify-Experten beauftragen. KI-Assistenten helfen beim Verstehen und Schreiben von Liquid. Was KI beim Shop-Aufbau insgesamt leistet, zeigt unser Test der KI-Shop-Builder. Den Code musst du aber trotzdem in einer Theme-Kopie testen.

Häufige Fragen

Muss ich für Shopify Liquid lernen?

Nein. Die meisten Händler kommen mit dem Theme-Editor, benutzerdefiniertem Liquid für kleine Snippets und Apps aus. Liquid lohnt sich, wenn du regelmäßig Anpassungen machst oder als Entwickler mit Shopify arbeiten willst. Dann starte mit HTML und CSS, lies die offizielle Liquid-Referenz von Shopify und übe an einem kostenlosen Entwicklungsshop statt am Live-Shop.

Kostet es etwas, Liquid-Code zu bearbeiten?

Der Code-Editor ist in jedem Shopify-Tarif enthalten, ein Zusatzpaket brauchst du nicht. Zum Lernen und Entwickeln nutzt du einen kostenlosen Entwicklungsshop über ein Partner- bzw. Entwicklerkonto. Kosten entstehen erst, wenn du ein Premium-Theme kaufst, Apps nutzt oder einen Entwickler beauftragst. Für einen Live-Shop brauchst du natürlich einen bezahlten Tarif.

Kann ich ein Figma-Design in Shopify übernehmen?

Nicht per Knopfdruck als sauberes Theme. Ein Figma-Entwurf ist eine Vorlage, die ein Entwickler in Abschnitte und Blöcke eines Themes übersetzt. Meist ist es sinnvoller, ein gutes bestehendes Theme zu wählen und das Design darauf anzupassen, statt ein komplett eigenes Theme zu bauen. So bleiben Theme-Editor und Updates nutzbar, und die Kosten bleiben überschaubar.

Wie arbeite ich an einem bestehenden Shop, ohne etwas kaputt zu machen?

Dupliziere das veröffentlichte Theme und arbeite nur in der Kopie. Teste alle Änderungen in der Vorschau auf Desktop und Handy, mit echten Produkten und einer Testbestellung. Dokumentiere jede Änderung. Erst wenn alles passt, veröffentlichst du die Kopie. Das alte Theme bleibt als Backup in deiner Theme-Bibliothek und lässt sich jederzeit wieder aktivieren.

Funktionieren ChatGPT oder GitHub Copilot mit Liquid?

Ja, KI-Assistenten kennen Liquid und können Snippets erklären oder schreiben. Sie erfinden aber manchmal Objekte oder Filter, die es nicht gibt, oder kennen neue Theme-Strukturen nicht. Prüfe Vorschläge deshalb gegen die offizielle Shopify-Dokumentation und teste sie ausschließlich in einer Theme-Kopie, bevor du sie live nimmst.

Ersetzt Hydrogen bald Liquid?

Danach sieht es nicht aus. Shopify pflegt beide Wege: Liquid-Themes für den Online Store, einschließlich der neuen Horizon-Themes, und Hydrogen für Headless-Projekte. Für die große Mehrheit der Shops bleibt das Liquid-Theme der Standard, weil Editor, Apps und Updates damit am besten funktionieren. Hydrogen ist eine Option für Projekte mit Entwicklerteam, kein Nachfolger.

Stand: Oktober 2026. Angaben zu Theme-Updates, Checkout und Hydrogen laut Shopify Help Center und Shopify-Entwicklerdokumentation.