So fügen Sie Code zum Head-Bereich in Shopify hinzu

July 4, 2025

Das Hinzufügen von Code oder Skripten (manchmal auch Snippets genannt) zum <head>-Bereich in Shopify ist nicht so schwierig, wie es scheint.

Dies ist unter Umständen erforderlich, wenn Sie Skripte von Drittanbietern hinzufügen, wie z. B. Tracking- oder Analyseskripte, oder wenn Sie Ihre Domain für Facebook oder Google verifizieren.

Schritt 1 – Duplizieren Sie Ihr Live-Design

Dies ist optional, aber sehr empfehlenswert.

Wenn Sie am Code Ihres Themes arbeiten, ist es immer ratsam, diesen zu duplizieren, damit Sie eine Sicherungskopie haben, falls versehentlich etwas kaputt geht.

Navigieren Sie zu Online-Shop > Designs
Wählen Sie unter „Aktuelles Design“ die Dropdown-Liste „Aktionen“ aus.
Duplikat auswählen
Shopify benötigt etwa eine Minute, um das Duplizieren Ihres Live-Themes abzuschließen.

Klicken Sie auf „Duplizieren“, um eine Kopie Ihres Live-Themes zu erstellen, an der wir sicher arbeiten können.

Anmerkung – Namenskonventionen für Themen

Wenn Sie mit einem Entwickler zusammenarbeiten, wird dieser wahrscheinlich seine eigenen Namenskonventionen verwenden. Wenn Sie alleine arbeiten, empfehle ich ein System wie das folgende:

--

"MyTheme - LIVE"

Dies ist immer Ihr aktuelles Live-Theme.

--

"MyTheme- DEV"

Dies ist eine Kopie Ihres Live-Themes mit allen zusätzlichen Änderungen, die Sie vorgenommen haben. d.h. Ihr „in Bearbeitung befindliches“ Theme.

--

"MyTheme - BACKUP 04-05-21"

Das Backup-Theme, das zuvor Ihr aktives Theme war.

--

Nach der Veröffentlichung eines Entwicklungs-Themes benennen Sie es in Live-Theme um. Das vorherige Live-Theme wird zum neuen Backup (d. h. einer Sicherungskopie Ihres Themes vor der Veröffentlichung Ihrer Änderungen).

Aktuelle Entwicklung -> neue Live-Version
altes LIVE -> neues BACKUP
Duplikat von neuem LIVE -> neuem DEV
wiederholen

Während Sie an neuen Änderungen arbeiten und diese veröffentlichen, benennen Sie jedes Theme gemäß den Konventionen um, damit Sie immer wissen, welches Theme live ist, an welchem Theme Sie gerade arbeiten und zu welchem Theme Sie schnell zurückkehren können, falls etwas schiefgeht.

Wir werden an dem duplizierten Theme arbeiten, mit einigen Namenskonventionen für | DEV und | LIVE.

Schritt 2 – Code im Shopify-Theme-Code-Editor bearbeiten

Navigieren Sie zu Online-Shop > Designs
Suchen Sie Ihr neu dupliziertes Design und wählen Sie die Dropdown-Liste „Aktionen“ aus.
Code bearbeiten auswählen

Dadurch wird ein neuer Bereich eröffnet, in dem Sie nahezu alle Code-Dateien einsehen können, die Ihren Shop betreiben.

Klicken Sie auf „Code bearbeiten“, um zu dem Bereich zu gelangen, in dem wir Ihre Codedateien für diese Version des Themes direkt bearbeiten.

Schritt 3 – Bearbeiten Sie die Datei theme.liquid und fügen Sie Ihren Code-Schnipsel hinzu.

Suchen Sie die Datei theme.liquid (unter Layout).
Drücken Sie in Ihrer theme.liquid-Datei CMD + F (Mac) oder STRG + F (Windows), um eine Suchleiste zu öffnen.
Geben Sie </head> in die Suche ein
Achten Sie darauf, den Schrägstrich (/) in </head> einzufügen . Ohne den Schrägstrich ist es <head>, und dies ist das öffnende Tag. Wenn Sie Code darüber einfügen, funktioniert er nicht.
Sie gelangen dadurch zum schließenden Tag bzw. zum Ende des <head>-Abschnitts Ihres Codes. Im Allgemeinen sollten Sie alle Ihre Code-Snippets direkt über diesem schließenden Tag platzieren.
Fügen Sie Ihren Code-Schnipsel ein, indem Sie ihn kopieren und in die Zeile direkt über dem </head>-Tag einfügen.
Falls sich direkt darüber Code befindet, fügen Sie einfach mit der ENTER- oder RETURN-Taste zusätzliche Zeilen dazwischen ein.
Achten Sie darauf, keine anderen Codeabschnitte zu überschreiben oder zu entfernen. Schon das versehentliche Entfernen eines einzigen < oder > kann dazu führen, dass der Code (z. B. Ihre Website) nicht mehr funktioniert.
Speichern
Sie können auch auf den Link „Ältere Versionen“ klicken, der oben angezeigt wird, falls Sie zu einer früheren Version dieser Datei zurückkehren müssen, falls etwas schiefgeht.

Öffnen Sie die Datei theme.liquid, suchen Sie das Tag und fügen Sie Ihren Code-Schnipsel direkt darüber ein.

Schritt 4 – Vorschau Ihres duplizierten Entwicklungsdesigns

Navigieren Sie zu Online-Shop > Designs
Suchen Sie das duplizierte Design, an dem Sie gearbeitet haben, und wählen Sie die Dropdown-Liste „Aktionen“ aus.
Vorschau auswählen

Dadurch wird eine Vorschau des Designs in Ihrem Shop geöffnet, die Sie vor der Veröffentlichung überprüfen können. Wenn alles in Ordnung ist, haben Sie hervorragende Arbeit geleistet!

Schritt 5 – Veröffentlichen des duplizierten Entwicklungsthemas

Wenn oben alles in Ordnung ist, klicken Sie auf Aktionen > Veröffentlichen bei dem Theme, an dem Sie gearbeitet haben.
Shopify benötigt einige Augenblicke, dann wird das duplizierte Theme in den Slot „Aktuelles Theme“ verschoben.
Anschließend können Sie die Umbenennung wie oben beschrieben vornehmen.
Benennen Sie ThemeName - LIVE in ThemeName - BACKUP xx-xx-xx um (tragen Sie dort das Datum ein)
Da es sich nun um Ihr Backup-Theme handelt
Benennen Sie ThemeName - DEV in ThemeName - LIVE um.
Da es sich nun um Ihr Live-/Produktionsthema handelt
Duplizieren Sie das neue ThemeName - LIVE und benennen Sie es in ThemeName - DEV um.
So haben Sie eine neue Kopie, an der Sie arbeiten können, wenn Sie weitere Änderungen vornehmen müssen.
*Stellen Sie sicher, dass Ihr Entwicklungs-Theme eine exakte, aktuelle und vollständige Kopie Ihres Produktions-Themes ist, bevor Sie mit der Bearbeitung beginnen.