Funktionsübersicht des Theme-Editors

Du kannst den Theme-Editor verwenden, um die Bereiche deines Themes, wie z. B. Farben, anzupassen und Inhalte in deinem Theme mit Abschnitten und Blöcken zu verwalten.

Auf den Theme-Editor zugreifen

Du kannst über deinen Shopify-Adminbereich auf den Theme-Editor zugreifen.

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

2. Klicke neben dem Theme, das du bearbeiten möchtest, auf Theme bearbeiten.

Layoutabschnitte des Theme-Editors

Der Theme-Editor hat die folgenden Abschnitte:

• Die Menüleiste enthält auf der linken Seite Navigationsschaltflächen zum Wechseln zwischen Abschnitten, Theme-Einstellungen und App-Embeds; in der Mitte den Theme-Namen sowie Markt- und Vorlagenmenüs; und auf der rechten Seite Steuerelemente für die Anpassung.
• Die Seitenleiste zeigt eine Baumansicht aller Inhalte für die Vorlage an, die du gerade ansiehst. Du kannst Abschnitte und Blöcke, App-Embeds und Einstellungen über die Seitenleiste verwalten. Die Seitenleiste ist minimierbar.
• Das Vorschaufenster zeigt dein Theme an und wird automatisch aktualisiert, wenn du Änderungen vornimmst. Du kannst eine mobile Vorschau aktivieren oder den Vorschau-Inspektor verwenden, um die Inhalte für eine Theme-Vorlage im Vorschaufenster zu verwalten.

Menüleiste

Die Menüleiste zeigt Navigation, Theme-Informationen und Steuerelemente für die Anpassung deines Themes an.

Seitenleisten-Navigation

Auf der linken Seite der Menüleiste kannst du zwischen den folgenden Ansichten in der Seitenleiste umschalten:

• , um die Abschnitte und Blöcke in deiner aktuellen Vorlage zu verwalten.
• , um die globalen Einstellungen deines Themes wie Farben, Typografie und Layout zu verwalten.
• , um Apps zu verwalten, die in dein Theme eingebettet sind.

Um die Seitenleiste auszublenden und eine Vorschau deines Themes in voller Breite zu erhalten, klicke erneut auf den aktiven Button, um die Auswahl aufzuheben. Wenn beide Panels sichtbar sind, werden durch Klicken auf den aktiven Button beide gleichzeitig minimiert.

Theme-Details, Markt- und Vorlagenmenüs

In der Mitte der Menüleiste findest du Folgendes:

• Der Theme-Name und sein Status. Dein veröffentlichtes Theme zeigt das Status-Label Live an. Unveröffentlichte Themes zeigen das Status-Label Entwurf an. Klicke auf den Theme-Namen, um auf die folgenden Optionen zuzugreifen:
  • Verwende Code bearbeiten, um den Code-Editor zu öffnen.
  • Verwende Standard-Theme-Inhalt bearbeiten, um den Standardtext in deinem Theme zu bearbeiten.
  • Verwende , um eine Vorschau deines Themes zu öffnen.
  • Verwende Dokumentation anzeigen, um die Dokumentation deines Themes zu öffnen.
  • Verwende , um alle verfügbaren Tastaturkürzel für den Theme-Editor zu überprüfen.
  • Verwende Support erhalten, um Support zu erhalten.
• Das Menü Markt, um eine Vorschau deines Themes für verschiedene Märkte anzuzeigen und es anzupassen.
• Das Menü Vorlage, um zwischen verschiedenen Seitenvorlagen in deinem Theme zu navigieren.

Anpassungs-Verknüpfungen

Du kannst die folgenden Steuerelemente in der Menüleiste verwenden, um dein Theme anzupassen und deine Änderungen zu verwalten:

• Aktiviere oder deaktiviere Sidekick, um dich bei Theme-Anpassungen zu unterstützen.
• Aktiviere oder deaktiviere den Vorschau-Inspektor.
• Schalte die Vorschau-Schaltfläche um, um eine Vorschau deines Themes auf einem mobilen Bildschirm anzuzeigen.
• Verwalte deine aktuelle Anpassungssitzung mit den Steuerelementen „Rückgängig“ und „Wiederholen“.
• Verwende die Schaltfläche Speichern, um deine Änderungen zu speichern.

Wenn keine nicht gespeicherten Anpassungen zum Wiederholen, Rückgängigmachen oder beidem vorhanden sind, ist die entsprechende Schaltfläche inaktiv.

Seitenleiste

Die Seitenleiste zeigt eine Baumansicht des gesamten Inhalts der Vorlage, die du gerade ansiehst. Du kannst Abschnitte und Blöcke sowie Theme-Einstellungen über die Seitenleiste verwalten. Du kannst die Seitenleiste minimieren, indem du erneut auf die aktive Navigations-Schaltfläche in der Menüleiste klickst, um sie umzuschalten.

Dein Theme verfügt möglicherweise über bedingte Einstellungen, die in der Seitenleiste angezeigt werden, je nachdem, welche anderen Einstellungen aktiv sind. Wenn dein Theme beispielsweise einen Block mit einer Einstellung zum Hinzufügen eines Videos oder eines Bildes hat, kann die Bildauswahl oder der Video-Link eine bedingte Einstellung sein, die nur angezeigt wird, nachdem du Bild als Medientyp ausgewählt hast.

Seitenleisten-Modi

Der Theme-Editor verfügt über zwei Modi, um den gesamten Platz auf deinem Bildschirm zu nutzen.

Der Modus mit doppelter Seitenleiste ist für breitere Browserfenster und größere Bildschirme gedacht, der Modus mit einfacher Seitenleiste für schmalere Browserfenster und kleinere Bildschirme. Der Seitenleistenmodus bestimmt, wo das Einstellungsfenster im Editor angezeigt wird.

Modus mit doppelter Seitenleiste

Wenn dein Browserfenster mindestens 1600 Pixel breit ist, stehen dir zwei Fensterbereiche zur Verfügung. Der linke Bereich enthält die Seitenstruktur mit deinen Abschnitten und Blöcken und der rechte Bereich enthält die Einstellungen für den ausgewählten Abschnitt oder Block. Du kannst den rechten Bereich minimieren, indem du die Auswahl der Abschnitte aufhebst.

Um den Theme-Editor auf einem großen Bildschirm im Modus mit einfacher Seitenleiste anzuzeigen, verkleinere dein Browserfenster, bis der Editor zum gestapelten Layout wechselt.

Modus mit einzelner Seitenleiste

Auf schmaleren Bildschirmen verwendet der Editor ein gestapeltes Layout. Wenn du auf einen Abschnitt oder Block klickst, gleitet das Einstellungsfenster vom unteren Bildschirmrand nach oben, anstatt deine Seitenstruktur zu verdecken. Du kannst den Trennstreifen ziehen, um die Aufteilung zwischen der Seitenstruktur und den Einstellungen anzupassen, sodass beide jederzeit sichtbar bleiben.

Vorschau deines Themes anzeigen

Du kannst eine Vorschau des mobilen Layouts deines Themes anzeigen, indem du auf die Schaltfläche in der Menüleiste klickst. Um zur Desktop-Vorschau zurückzukehren, klicke erneut auf die Mobil-Schaltfläche.

Um eine Vorschau deines Themes in voller Breite zu erhalten, klicke auf den aktiven Navigationsbutton der Seitenleiste, um die Seitenleiste zu minimieren. Wenn beide Panels sichtbar sind, werden dadurch beide gleichzeitig minimiert, sodass du eine Vorschau deiner Storefront in voller Breite erhältst.

Rückgängigmachen und Wiederherstellen nicht gespeicherter Änderungen

Du kannst die Schaltflächen und verwenden, um nicht gespeicherte Anpassungen rückgängig zu machen oder wiederherzustellen. Nachdem du deine Änderungen gespeichert hast, können sie nicht mehr wiederhergestellt oder rückgängig gemacht werden.

Verwendung von Tastenkombinationen im Theme-Editor

Du kannst Tastenkombinationen verwenden, um im Theme-Editor zu navigieren und Aktionen auszuführen.