Tutorials

Wie man HTML-Code in Shopify bearbeitet [2025 Easy Guide]

Melden

Hier ist ein umfassendes Tutorial, wie du im Jahr 2025 den Code deines Shopify-Shops sicher und effizient bearbeitest.

Shopify ist bekannt für seinen benutzerfreundlichen Drag-and-Drop-Editor. Doch manchmal reicht das Standard-Design nicht aus, und du möchtest individuelle Anpassungen vornehmen – sei es für Tracking-Pixel, Design-Änderungen oder spezielle Funktionen.

In diesem Guide lernst du Schritt für Schritt, wie du auf den Code zugreifst und was du dabei beachten musst.

Schritt 1: Das wichtigste Backup (Sicherheit zuerst!)

Bevor du auch nur eine Zeile Code änderst, solltest du unbedingt eine Kopie deines aktuellen Themes erstellen. Wenn etwas schiefgeht, kannst du die alte Version mit einem Klick wiederherstellen.

  1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
  2. Klicke neben deinem aktuellen Theme auf die drei Punkte (···).
  3. Wähle Duplizieren.
  4. Shopify erstellt nun eine Kopie (z. B. „Kopie von Dawn“). Arbeite idealerweise zuerst an dieser Kopie.

Schritt 2: Den Code-Editor öffnen

Um den eigentlichen HTML/Liquid-Code zu sehen:

  1. Klicke erneut auf die drei Punkte (···) neben deinem Theme.
  2. Wähle Code bearbeiten.
  3. Du befindest dich nun in der Entwicklungsumgebung von Shopify.

Schritt 3: Die Dateistruktur verstehen (Wo ist mein HTML?)

Shopify nutzt kein reines HTML, sondern die Template-Sprache Liquid (Dateiendung .liquid). Hier sind die wichtigsten Ordner:

  • Layout: Enthält die theme.liquid. Das ist die Hauptdatei. Änderungen hier wirken sich auf alle Seiten aus (z. B. <head>-Bereich für Google Analytics oder Meta-Tags).
  • Templates: Hier liegen die Strukturen für spezifische Seiten wie Produkte (product.json oder product.liquid), Warenkorb oder Blogbeiträge.
  • Sections: Hier findest du die Bausteine deiner Startseite (z. B. Header, Footer, Newsletter-Box).
  • Snippets: Kleine Code-Schnipsel, die in andere Dateien geladen werden (z. B. Social-Media-Icons).
  • Assets: Hier liegen deine CSS-Dateien (für das Design) und JavaScript-Dateien.

Schritt 4: Code suchen und bearbeiten

Wenn du eine bestimmte Stelle suchst, nutze die Suchfunktion:

  1. Nutze die Suchleiste oben links, um nach Dateinamen zu suchen (z. B. header).
  2. Wenn du innerhalb einer Datei nach einem Begriff suchen willst, klicke in den Code und drücke Strg + F (Windows) oder Cmd + F (Mac).
  3. Änderung vornehmen: Du kannst HTML-Tags wie <div>, <h1> oder <p> direkt bearbeiten oder hinzufügen.

Schritt 5: Speichern und Testen

  1. Nachdem du deine Änderungen vorgenommen hast, klicke oben rechts auf Speichern.
  2. Klicke auf Vorschau des Shops, um zu sehen, ob die Änderung wie gewünscht aussieht.
  3. Pro-Tipp: Wenn du einen Fehler gemacht hast, bietet Shopify eine Versionierung an. Klicke oben neben dem Dateinamen auf „Aktuelle Version“ und wähle einen früheren Zeitpunkt aus, um den Code zurückzusetzen.

Häufige Anwendungsfälle im Jahr 2025

A. Tracking-Code im Header einfügen

Wenn du einen Code zwischen <head> und </head> einfügen musst:

  1. Öffne die Datei theme.liquid im Ordner Layout.
  2. Suche nach </head>.
  3. Füge deinen Code direkt in die Zeile darüber ein.

B. CSS für das Design anpassen

Wenn du Farben oder Abstände ändern willst, die der Theme-Editor nicht anbietet:

  1. Suche im Ordner Assets nach der Datei base.css oder theme.css.
  2. Scrolle ganz nach unten und füge deinen eigenen CSS-Code dort ein.

3 Goldene Regeln für Code-Anpassungen

  1. Kommentare nutzen: Markiere deine Änderungen, damit du sie später wiederfindest:
    {% comment %} START EIGENER CODE - BUTTON FARBE {% endcomment %}
... dein code ...
{% endcomment %} ENDE EIGENER CODE {% endcomment %}
  2. Vermeide Änderungen in .json Dateien: In modernen "OS 2.0 Themes" (wie Dawn) sind viele Templates .json Dateien. Diese solltest du nur bearbeiten, wenn du genau weißt, was du tust. Nutze stattdessen das Interface im Customizer.
  3. App-Code sauber halten: Viele Apps hinterlassen Code-Reste nach der Deinstallation. Wenn du Apps löschst, schaue kurz in die theme.liquid, ob dort noch ungenutzte Skripte stehen.

Fazit

Das Bearbeiten von Code in Shopify 2025 ist dank der integrierten Versionskontrolle und der klaren Struktur sicherer denn je. Solange du vorher ein Backup erstellst, kannst du experimentieren und deinen Shop individuell anpassen.

Hast du eine spezifische Änderung im Sinn? Frag einfach nach!

0