Theme-Code bearbeiten

Diese Seite wurde gedruckt um Sep 22, 2020. Die neueste Version findest du unter https://help.shopify.com/de/manual/online-store/os/using-themes/change-the-layout/theme-code.

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 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ügen.

Bevor du dein Theme anpasst

Bevor du dein Theme anpasst, solltest du die folgenden Aufgaben ausführen:

  • 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.

Deinen Theme-Code bearbeiten

Du kannst den Code für dein Theme bearbeiten.

Schritte:

  1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
  1. Tippe in der Shopify App auf Shop.
  2. Tippe unter Vertriebskanäle auf Onlineshop.
  3. Tippe auf Themes verwalten.
  1. Tippe in der Shopify App auf Shop.
  2. Tippe unter Vertriebskanäle auf Onlineshop.
  3. Tippe auf Themes verwalten.
  1. Klicke auf Aktionen > 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:

Die Code-Editor-Seite

Du kannst den Code-Editor auf volle Bildschirmgröße erweitern, indem du auf das Erweiterungssymbol klickst.

Das Erweiterungssymbol

Du kannst die Seite auf die normale Größe zurücksetzen, indem du auf das Verkleinerungssymbol klickst:

Das Verkleinerungssymbol

Wenn Sie auf eine Datei im Verzeichnis auf der linken Seite klicken, wird Sie im Code-Editor geöffnet. Sie können mehrere Dateien gleichzeitig öffnen und bearbeiten. Alle Dateien, die Sie ändern, werden mit einem violetten Punkt neben dem Dateinamen angezeigt:

Das Verzeichnis der Theme-Dateien mit einem violetten Punkt neben den geänderten Dateien

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

Wenn Sie Änderungen an einer Datei rückgängig machen möchten, nachdem Sie auf Speicherngeklickt haben, öffnen Sie die Datei und klicken Sie auf ältere Versionen. Ein Dropdown-Menü zeigt das Datum und die Uhrzeit für jede von Ihnen vorgenommene Speicherung an. Wählen Sie die Version aus, die Sie wiederherstellen möchten, und klicken Sie auf Speichern.

Das Dropdown-Menü

Während der Code-Editor auf Vollbild erweitert ist, können Sie das Editor-Farbschema zwischen Hell und Dunkel umschalten, indem Sie auf die Schaltflächen am unteren Rand der Seite klicken:

Der Code-Editor mit Farbschema

Informationen zu den Vorteilen der Verwendung des dunklen Editor-Farbschemas findest du unter The Power of the Dark Side: Dark User Interfaces (Die Macht der dunklen Seite: Dunkle Benutzeroberflächen) im Blog für Shopify-Partner.

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.

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 deinen bei der Anpassung von Themes zur Verfügung stehen, findest du unter Zusätzliche Ressourcen für Support mit Themes.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren