Theme-Code bearbeiten

Achtung

Wenn Änderungen, die du am Code eines Themes vorgenommen hast, nicht mit einer Theme-Aktualisierung kompatibel sind, werden alle deine Codeänderungen in der aktualisierten Kopie entfernt. Du solltest den Code deines Designs nur bearbeiten, wenn du die benötigten Änderungen nicht mit einer Shopify-App oder mithilfe des Theme-Editors vornehmen kannst.

Du kannst deinen Theme-Code bearbeiten, um detaillierte Änderungen an deinem Onlineshop vorzunehmen. Die meisten Dateien, aus denen sich ein Theme zusammensetzt, enthalten Liquid, die Vorlagensprache von Shopify. Theme-Dateien enthalten auch HTML, CSS, JSON und JavaScript. Bearbeite den Code für ein Theme nur, wenn du dich mit HTML und CSS auskennst und über ein grundlegendes Verständnis von Liquid verfügst.

Bringe dein Geschäft voran

Wenn du benutzerdefinierte Funktionen oder Code hinzufügen möchtest, aber keine Erfahrung bei der Entwicklung von Websites mit HTML, CSS und JavaScript hast, solltest du darüber nachdenken, einen Shopify-Partner zu engagieren.

Bevor du dein Theme anpasst

Um die Anpassung deines Themes vorzubereiten, schließe die folgenden empfohlenen Aufgaben ab:

• Dupliziere dein Theme zum Erstellen einer Sicherungskopie. Dies macht es einfach, deine Änderungen zu verwerfen und bei Bedarf erneut zu starten.
• Überprüfe vorab, welches Support-Level zur Verfügung steht.
• Erfahre mehr über die Anforderungen und Best Practices für das Hochladen von Bildern.

Theme-Code bearbeiten

Du kannst den Code für dein Theme bearbeiten.

Schritte:

Desktop

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
2. Klicke auf ... > Code bearbeiten.

iPhone

1. Tippe in der Shopify-App auf die Schaltfläche ....
2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.
4. Klicke auf ... > Code bearbeiten.

Android

1. Tippe in der Shopify-App auf die Schaltfläche ....
2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.
4. Klicke auf ... > Code bearbeiten.

Der Code-Editor zeigt auf der linken Seite ein Verzeichnis der Theme-Dateien und auf der rechten Seite einen Bereich zum Anzeigen und Bearbeiten der Dateien an.

Wenn du auf eine Datei im Verzeichnis auf der linken Seite klickst, wird sie im Code-Editor geöffnet. Du kannst mehrere Dateien gleichzeitig öffnen und bearbeiten. Alle Dateien, die du änderst, werden mit einem Punkt neben dem Dateinamen gekennzeichnet:

Damit kannst du besser verfolgen, wo du Änderungen vorgenommen hast.

Auf eine ältere Version deiner Theme-Datei umstellen

Wenn du Theme-Dateien geändert hast und die Änderungen rückgängig machen möchtest, kannst du die einzelnen .liquid- und .json-Dateien durch die Eingabe des Zeitpunkts vor den Änderungen zurücksetzen.

Du kannst Theme-Dateien in jedem Ordner im Verzeichnis wiederherstellen, mit Ausnahme der Dateien im Ordner Assets. Dateien im Ordner Assets – einschließlich der Dateien theme.scss.liquid und theme.js – haben keine zuvor bearbeiteten Versionen gespeichert. Wenn du im Ordner Assets Änderungen an Dateien vornimmst, musst du dich möglicherweise an den Theme-Support wenden oder einen Shopify-Partner engagieren.

Schritte:

Desktop

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
3. Klicke im Verzeichnis der Theme-Dateien auf eine der .liquid- oder .json-Dateien, die du kürzlich bearbeitet hast.
4. Klicke oben im Code-Editor auf Aktuell.
5. Verwende das Dropdown-Menü, um eine ältere Version auszuwählen. Wenn du einen Datumsstempel auswählst, wird der Code auf diese gespeicherte Version zurückgesetzt.
6. Optional: Klicke auf Vorschau des Shops, um zu überprüfen, ob der Fehler behoben wurde.
7. Um die ältere Version wiederherzustellen, klicke auf Speichern.

iPhone

1. Tippe in der Shopify-App auf die Schaltfläche ....
2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
3. Tippe auf Alle Themes verwalten.
4. Suche das Theme, das du bearbeiten möchtest, tippe auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und tippe dann auf Code bearbeiten.
5. Tippe im Verzeichnis der Theme-Dateien auf eine der .liquid- oder .json-Dateien, die du kürzlich bearbeitet hast.
6. Tippe oben im Code-Editor auf Aktuell.
7. Verwende das Dropdown-Menü, um eine ältere Version auszuwählen. Wenn du einen Datumsstempel auswählst, wird der Code auf diese gespeicherte Version zurückgesetzt.
8. Optional: Tippe auf Vorschau des Shops, um zu überprüfen, ob der Fehler behoben wurde.
9. Um die ältere Version wiederherzustellen, tippe auf Speichern.

Android

1. Tippe in der Shopify-App auf die Schaltfläche ☰.
2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.
4. Suche das Theme, das du bearbeiten möchtest, tippe auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und tippe dann auf Code bearbeiten.
5. Tippe im Verzeichnis der Theme-Dateien auf eine der .liquid- oder .json-Dateien, die du kürzlich bearbeitet hast.
6. Tippe oben im Code-Editor auf Aktuell.
7. Verwende das Dropdown-Menü, um eine ältere Version auszuwählen. Wenn du einen Datumsstempel auswählst, wird der Code auf diese gespeicherte Version zurückgesetzt.
8. Optional: Tippe auf Vorschau des Shops, um zu überprüfen, ob der Fehler behoben wurde.
9. Um die ältere Version wiederherzustellen, tippe auf Speichern.

Theme-Überprüfung

Der Code-Editor beinhaltet eine Theme-Überprüfung. Diese Funktion hilft dir dabei, Fehler zu vermeiden, indem Feedback gegeben wird, sobald der Code geschrieben wird, anstatt Fehler anschließend im aktuellen Theme zu entdecken.

Im Code-Editor kann die Theme-Überprüfung die folgenden Fehler im bearbeiteten Code identifizieren:

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

Fehler werden durch eine rote Linie unter dem Code angezeigt. Bewege den Mauszeiger über die hervorgehobene Zeile, um den Fehler anzuzeigen.

Tutorials zur Anpassung von Theme-Code

Die Tutorials zur Anpassung von Theme-Code unterstützen dich bei der Durchführung von Änderungen an deinem Onlineshop. Die Tutorials sind nach dem Typ der Seite oder Funktion organisiert, die sie ändern.

Tutorials für die Theme-Anpassung sind nach der Version der verwendeten Theme-Architektur aufgeteilt. Erfahre, wie du deine Theme-Architekturversion identifizieren kannst.

• Online Store 2.0-Theme-Anpassung
• Vintage-Theme-Anpassung

Hilfe bei Anpassungen erhalten

Wenn du Hilfe bei der Änderung deines Themes benötigst, kannst du den Entwickler deines Themes kontaktieren, um Unterstützung zu erhalten.

Informationen zu anderen Ressourcen, die dir bei der Anpassung von Themes zur Verfügung stehen, findest du unter Zusätzliche Ressourcen für Support mit Themes.