Theme-Code bearbeiten

Mit dem Code-Editor kannst du deinen Theme-Code bearbeiten, um detaillierte Änderungen an deinem Onlineshop vorzunehmen. Die meisten Dateien, aus denen ein Theme besteht, enthalten Liquid, die Vorlagensprache von Shopify. Theme-Dateien enthalten außerdem HTML, CSS, JSON und JavaScript. Bearbeite den Code für ein Theme nur, wenn du dich mit HTML und CSS auskennst und über Grundkenntnisse in Liquid verfügst.

Du kannst den Code deines Themes erst bearbeiten, nachdem du es gekauft hast. Dies schließt die Verwendung des KI-Code-Generators im Theme-Editor ein. Wenn du eine Testversion eines bezahlten Themes verwendest, musst du es kaufen, bevor du Codeänderungen vornehmen kannst.

Der Code-Editor zeigt ein Verzeichnis der Dateien deines Themes und einen Bereich zur Anzeige und Bearbeitung der Dateien an. Wenn du auf eine Datei im Verzeichnis klickst, wird sie im Code-Editor geöffnet. Du kannst mehrere Dateien gleichzeitig öffnen und bearbeiten. Du kannst auch mehrere Dateien gleichzeitig öffnen und überprüfen.

Theme-Code bearbeiten

Du kannst den Code-Editor verwenden, um die Dateien deines Themes zu ändern.

Schritte:

Änderungen speichern

Wenn du eine Datei bearbeitest, wird neben dem Tab-Namen ein Punkt angezeigt, um nicht gespeicherte Änderungen zu kennzeichnen. Klicke auf die Schaltfläche Speichern, um deine Änderungen zu speichern. Du kannst auch ⌘ + S auf dem Mac oder Strg + S unter Windows eingeben, um deine Änderungen zu speichern.

Theme-Code formatieren

Um die Code-Einrückung zu korrigieren, öffne die Befehlspalette mit ⌘ + Umschalt + P auf dem Mac oder Strg + Umschalt + P unter Windows, gib format ein und wähle dann Dokument formatieren aus.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

2. Klicke auf > Code bearbeiten.

3. Öffne die Datei, die du formatieren möchtest.

4. Gib ⌘ + P auf dem Mac oder Strg + P unter Windows ein.

5. Gib in der Befehlspalette format ein und drücke dann die Eingabetaste auf deiner Tastatur.

6. Speichere die Datei.

Dateiänderungen nachverfolgen

Um Änderungen an Theme-Dateien rückgängig zu machen, verwende die Ansicht Chronik, um den Dateiverlauf zu überprüfen und eine frühere Version wiederherzustellen. Beachte, dass Änderungen, die auf anderen Geräten vorgenommen wurden, nicht in der Ansicht Chronik angezeigt werden.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

2. Klicke auf > Code bearbeiten.

3. Öffne die Datei, die du überprüfen möchtest.

4. Klicke in der Ansicht Chronik auf einen Eintrag in der Chronik, um die Unterschiede zu vergleichen.

5. Um die Datei in einem früheren Zustand wiederherzustellen, klicke mit der rechten Maustaste auf den Chronik-Eintrag und wähle dann Inhalte wiederherstellen aus.

6. Klicke auf Wiederherstellen.

Theme Check

Der Code-Editor enthält Theme Check, eine Funktion, die hilft, Fehler zu vermeiden, indem sie sofortiges Feedback gibt, während der Code geschrieben wird, anstatt Fehler erst in deinem aktuellen Theme zu entdecken.

Im Code-Editor kann Theme Check die folgenden Fehler in bearbeitetem Code erkennen:

• Parser-blockierende Skripte, die eine Storefront verlangsamen können
• Inkonsistenzen zwischen Übersetzungsdateien, z. B. fehlende Übersetzungsschlüssel oder nicht übereinstimmende Übersetzungen in einer Gebietsschemadatei
• Fehlende Vorlagen

Fehler werden durch eine rote Linie unter dem Code angezeigt. Um den Fehler anzuzeigen, fahre mit der Maus über die hervorgehobene Zeile.

Suchen und Ersetzen im Code-Editor

Du kannst im Code-Editor auf eine der folgenden Weisen suchen:

• Im Code einer bestimmten Datei suchen.
• Im Code aller Dateien des Themes suchen.

Du kannst auch Code in einer bestimmten Datei oder mehrere Instanzen in allen Theme-Dateien ersetzen. Du kannst auch nach einer Datei anhand ihres Namens suchen, um eine Datei zu öffnen.

Suchen in einer Datei

Du kannst den Code in einer bestimmten Datei durchsuchen und ersetzen. Verwende die Pfeiltasten, um die einzelnen Instanzen des Codes zu überprüfen.

Nachdem du nach Code gesucht hast, kannst du den Code in einer Datei ersetzen.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

2. Klicke auf > Code bearbeiten.

3. Öffne die Datei, die du durchsuchen möchtest.

4. Drücke ⌘ + F auf einem Mac oder Strg + F unter Windows.

5. Gib im Feld Suchen deinen Suchbegriff ein.

6. Optional: Um Code zu ersetzen, führe die folgenden Aktionen aus:

• Klicke im Such-Modal auf das -Symbol.
• Gib im Feld Ersetzen den Ersatzcode ein. Du kannst auf Groß-/Kleinschreibung beibehalten klicken, um die Groß-/Kleinschreibung des Ersatzcodes an die der vorhandenen Instanz anzupassen.
• Klicke auf das Symbol Ersetzen, um eine einzelne Instanz zu ersetzen, oder auf das Symbol Alle ersetzen, um alle Instanzen gleichzeitig zu ersetzen.

Suchen in allen Dateien

Klicke auf die Suchschaltfläche in der linken Seitenleiste, um alle Theme-Dateien zu durchsuchen. Die Ergebnisse zeigen jede Instanz deines Suchbegriffs und die Datei an, in der sie vorkommt.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

2. Klicke auf > Code bearbeiten.

3. Klicke auf das -Symbol, um den Suchbereich zu öffnen.

4. Gib im Feld Suchen deinen Suchbegriff ein.

5. Optional: Um Code zu ersetzen, führe die folgenden Aktionen aus:

• Klicke im Such-Modal auf das -Symbol.
• Gib im Feld Ersetzen den Ersatzcode ein.
• Ersetze Instanzen einzeln oder alle auf einmal.

Erweiterte Suchoptionen

Um deine Suchergebnisse einzugrenzen, verwende eine oder mehrere der folgenden Suchoptionen:

• Groß-/Kleinschreibung beachten findet Suchbegriffe, die exakt der eingegebenen Groß- und Kleinschreibung entsprechen. Wenn du beispielsweise produkt eingibst, hebt die Suche alle Instanzen von „produkt“ und „Produkt“ hervor. Wenn du Groß-/Kleinschreibung beachten auswählst, hebt die Suche nur Instanzen von produkt hervor.
• Ganzes Wort suchen findet nur exakte Wortübereinstimmungen und schließt Teilübereinstimmungen aus. Wenn du beispielsweise cart eingibst, werden Instanzen von „cart“ hervorgehoben, aber nicht von „carton“.
• Regulären Ausdruck verwenden gibt Suchergebnisse zurück, die mit einem regulären Ausdruck (Regex) übereinstimmen. Ein Regex ist ein String aus Zeichen, der ein Suchmuster in Text festlegt.

Im Bereich Suchen kannst du auch Dateien und Ordner auswählen, die in die Suchergebnisse ein- oder von ihnen ausgeschlossen werden sollen.

Klicke auf , um das erweiterte Menü zu öffnen. Du kannst einen beliebigen Datei- oder Ordnerpfad in die Felder einzuschließende Dateien oder auszuschließende Dateien eingeben. Um mehr als eine Datei oder einen Ordner hinzuzufügen, trenne sie durch ein Leerzeichen und ein Komma. Um beispielsweise nach Dateien im Ordner sections zu suchen, gib ./sections in das Feld einzuschließende Dateien ein.

Du kannst auch von der Dateiverzeichnisansicht aus in einem bestimmten Ordner suchen. Klicke mit der rechten Maustaste auf einen Ordner und wähle dann Im Ordner suchen ... aus dem Dropdown-Menü aus.

Theme-Dateien verwalten

Du kannst Dateien in deinem Theme-Code verwalten. Du kannst im Dateiverzeichnis Dateien löschen, neue Dateien hinzufügen, Dateien umbenennen und geänderte Dateien zurücksetzen.

Eine Theme-Datei öffnen

Um eine Theme-Datei zu öffnen, klicke auf einen Ordner und dann im Explorer auf den Dateinamen. Du kannst auch nach Dateien anhand ihres Namens oder ihrer Dateierweiterung suchen und die Datei dann öffnen.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

2. Klicke auf > Code bearbeiten.

3. Gib ⌘ + P auf dem Mac oder Strg + P unter Windows ein.

4. Gib den Dateinamen in die Suchleiste ein und wähle die Datei aus, oder wähle eine Datei aus der Liste Zuletzt geöffnet aus.

Eine neue Theme-Datei hinzufügen

Um eine Datei hinzuzufügen, wähle einen Ordner aus, klicke auf das Symbol Neue Datei und gib dann den Dateinamen und die Dateierweiterung ein.

Dateinamen können die Zeichen A–Z und 0–9 enthalten und dürfen keine Leerzeichen enthalten. Trenne Wörter durch Bindestriche oder Unterstriche. Eine Dateierweiterung wird durch einen Punkt . und den Erweiterungstyp definiert. Zum Beispiel .liquid oder .css.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

2. Klicke auf > Code bearbeiten.

3. Klicke auf den Ordner, dem du eine neue Datei hinzufügen möchtest.

4. Klicke mit der rechten Maustaste auf den Ordnernamen und wähle Neue Datei ... aus dem Dropdown-Menü aus.

5. Gib einen neuen Namen für die Datei ein.

6. Drücke die Eingabetaste auf deiner Tastatur.

Ein neues Asset hochladen

Du kannst ein neues Asset, wie z. B. ein Symbol oder eine Bilddatei, in den Ordner assets des Code-Editors hochladen.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

2. Klicke auf > Code bearbeiten.

3. Klicke mit der rechten Maustaste auf den Ordner assets.

4. Klicke auf Hochladen ....

5. Wähle die Datei aus, die du hochladen möchtest.

6. Klicke auf Öffnen.

Eine Theme-Datei umbenennen

Du kannst mit der rechten Maustaste auf eine Datei klicken, um sie umzubenennen. Achte darauf, die Dateierweiterung nicht zu bearbeiten oder zu entfernen. Eine Dateierweiterung ist durch einen Punkt . und den Erweiterungstyp definiert. Zum Beispiel .liquid oder .css. Dateinamen können die Zeichen A–Z und 0–9 enthalten und dürfen keine Leerzeichen enthalten. Trenne Wörter mit Bindestrichen oder Unterstrichen. Wenn der Dateiname ungültig ist, wird der neue Dateiname nicht gespeichert.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

2. Klicke auf > Code bearbeiten.

3. Klicke mit der rechten Maustaste auf eine Datei und wähle im Dropdown-Menü „Umbenennen ...“ aus.

4. Gib einen neuen Namen für die Datei ein.

5. Drücke die Eingabetaste auf deiner Tastatur.

Löschen einer Theme-Datei

Du kannst beliebige Dateien in deinem Theme löschen. Gelöschte Theme-Dateien können nicht wiederhergestellt werden.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.

2. Klicke auf > Code bearbeiten.

3. Klicke mit der rechten Maustaste auf eine Datei und wähle im Dropdown-Menü die Option „Endgültig löschen“ aus.

4. Klicke auf „Löschen“.