Passe deinen Onlineshop mit dem Theme-Editor an
Mit dem Theme-Editor kannst du die Bereiche deines Themes, etwa die Farben, anpassen und Inhalte in deinem Theme mit Abschnitten und Blöcken verwalten. Der Theme-Editor verfügt über folgende Bereiche:
- In der Menüleiste werden Tools angezeigt, mit denen du weitere Informationen zu deinem Theme erhältst, zu verschiedenen Vorlagen in deinem Theme navigieren kannst, z. B. zur Produktseite, die Bildschirmgröße anpassen und deine Anpassungsaktionen verwalten kannst.
- Das Seitenleistenmenü zeigt jetzt eine Strukturansicht des gesamten Inhalts der Vorlage an, die du derzeit in der Seitenleiste anzeigen lässt. Du kannst Abschnitte, Blöcke und Einstellungen über das Seitenleistenmenü verwalten.
- Das Vorschaufenster zeigt dein Theme an und aktualisiert es automatisch, wenn du Änderungen vornimmst. Du kannst in der Menüleiste verschiedene Anzeigeoptionen auswählen, um eine Vorschau deines Themes auf dem Desktop oder im mobilen Layout anzuzeigen. Du kannst außerdem den Vorschau-Inspector aktivieren, um die Inhalte einer Theme-Vorlage im Vorschaufenster zu verwalten.
Auf dieser Seite
- Auf den Theme-Editor zugreifen
- Menüleiste
- Dokumentation ansehen, Support erhalten und Theme-Version überprüfen
- Hilfe bei Anpassungen erhalten
- Tastaturkürzel im Theme-Editor verwenden
- Vorlagen
- Vorschau von Vorlagen mit bestimmten Ressourcen
- Vorschau-Inspector
- Unterschiedliche Bildschirmgrößen im Theme-Editor anzeigen
- Seitenleistenmenü
- Abschnitte und Blöcke
Auf den Theme-Editor zugreifen
Den Theme-Editor erreichst du über deinen Shopify-Adminbereich.
Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
Klicke neben dem Theme, das du bearbeiten möchtest, auf Anpassen.
Menüleiste
Die Menüleiste enthält Informationen zu deinem Theme, Menüs für den Zugriff auf weitere Informationen und verschiedene Bereiche deines Themes sowie Steuerelemente zum Anpassen deines Themes.
In der Menüleiste werden folgende Zusatzinformationen und Navigationsmöglichkeiten angezeigt:
- Klicke auf die Schaltfläche
, um zum Shopify-Adminbereich zurückzukehren. - Überprüfen des Namens deines Themes.
- Überprüfen des Status deines Themes. Dein veröffentlichtes Theme zeigt das Live-Status-Label. Unveröffentlichte Themes zeigen das Entwurf-Status-Label.
- Über das
Menü kannst du auf die folgenden zusätzlichen Optionen zugreifen:
- Mit dem Symbol 
Code bearbeiten kannst du den Code-Editor öffnen.
- Mit dem Symbol 
Standard-Theme-Texte bearbeiten kannst du den Standardtext im Theme bearbeiten.
- Mit dem Symbol 
kannst du eine Vorschau des Themes öffnen.
- Mit dem Symbol 
Dokumentation anzeigen kannst du dieDokumentation des Themes öffnen.
- Mit dem Symbol 
kannst du alle verfügbaren Tastaturkürzel für den Theme-Editor anzeigen.
- Mit dem Symbol 
Support erhalten kannst du Support erhalten.
Über folgende Menüs kannst du auf verschiedene Vorlagen und Marktlayouts zugreifen:
Du kannst die folgenden Steuerelemente in der Menüleiste verwenden, um dein Theme anzupassen:
- Sidekick aktivieren oder deaktivieren.
- Aktiviere oder deaktiviere den Vorschau-Inspector.
- Ändere die Bildschirmgröße mit den Bildschirmgröße-Reglern.
- Verwalte deine aktuellen Anpassungen mit den Steuerelementen zum Rückgängigmachen und Wiederherstellen.
- Benutze die Schaltfläche Speichern, um deine Änderungen zu speichern.
Dokumentation ansehen, Support erhalten und Theme-Version überprüfen
Im Menü in der Menüleiste kannst du verfügbare Informationen zu deinem Theme anzeigen, z. B. die Theme-Version und Entwicklerinformationen. Außerdem findest du dort Links zur Dokumentation des Themes und zu Supportinformationen.
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.
Tastaturkürzel im Theme-Editor verwenden
Du kannst Tastaturkürzel verwenden, um im Theme-Editor zu navigieren und Aktionen durchzuführen.
| Kategorie | Aktion | Tastaturkürzel mit Windows | Tastaturkürzel mit MacOS |
|---|---|---|---|
| Allgemein | Rückgängig machen |
CTRL + Z
|
⌘ + Z
|
| Wiederholen |
CTRL + Y
|
⌘ + Y
| |
| Speichern |
CTRL + S
|
⌘ + ⇧ + S
| |
| Alle Tastenkombinationen anzeigen |
CTRL + /
|
⌘ + /
| |
| Tools | Vorschau-Inspector |
CTRL + SHIFT + |
|
⌘ + ⇧ + |
|
| Vorschaumodus |
⊞ + CTRL + |
|
⌘ + ⌃ + |
| |
| Sidekick |
CTRL + .
|
⌘ + .
| |
| navigation | Abschnitte |
⊞ + CTRL + Z
|
⌘ + ⌃ + 1
|
| Theme-Einstellungen |
⊞ + CTRL + Z
|
⌘ + ⌃ + 2
| |
| App-Einbettungen |
⊞ + CTRL + Z
|
⌘ + ⌃ + 3
| |
| Abschnitte und Blöcke | Ausblenden und anzeigen |
CTRL + SHIFT + H
|
⌘ + ⇧ + H
|
| Entfernen |
SHIFT + ⭠
|
⇧ + ⌫
| |
| Vorheriges Element auswählen |
SHIFT + ←
|
⇧ + ▲
| |
| Nächstes Element auswählen |
SHIFT + →
|
⇧ + ▼
| |
| Ausgewähltes Element öffnen |
SHIFT + ENTER
|
⇧ + ▼
| |
| Alle Abschnitte erweitern |
CTRL + SHIFT + O
|
⌘ + ⇧ + O
| |
| Alle Abschnitte minimieren |
CTRL + SHIFT + P
|
⌘ + ⇧ + P
|
Vorlagen
Du kannst über die Seitenauswahl in der oberen Leiste des Theme-Editors auf alle Vorlagen deines Themes zugreifen.
Wenn du ein Theme für Online Store 2.0 verwendest, kannst du auch direkt über die Seitenauswahl eine neue Vorlage erstellen, indem du auf die Option Neue Vorlage klickst.
Vorschau von Vorlagen mit bestimmten Ressourcen
Du kannst eine Vorschau anzeigen, wie deine Vorlage mit jeder kompatiblen Ressource in deinem Shop aussieht. Wenn du beispielsweise eine Produktvorlage anzeigst, kannst du diese mit jedem Produkt in deinem Shop testen.
Du musst die Vorlage weiterhin der Ressource im Shopify-Adminbereich zuweisen.
Du kannst auch über die Suchleiste in der Seitenauswahl, die Tools Abschnitt hinzufügen oder Block hinzufügen oder unter App-Einbettungen nach Vorlagen und Ressourcen suchen.
Schritte:
Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
Klicke neben dem Theme, das du bearbeiten möchtest, auf Anpassen.
Wähle aus dem Vorlagenmenü die Vorlage aus, für die du die Vorschau anzeigen möchtest.
Klicke im Seitenleistenmenü im Abschnitt Vorschau auf Ändern.
Wähle im Menü Auswählen die Ressource aus, die du in der Vorschau anzeigen möchtest.
Vorschau-Inspector
Mit dem Vorschau-Inspector kannst du direkt vom Vorschaufenster aus zu Abschnitten und Blöcken navigieren und die entsprechenden Einstellungen schneller und intuitiver finden. Mit dem Vorschau-Inspector kannst du Abschnitte und Blöcke direkt im Vorschaufenster neu anordnen, ausblenden oder duplizieren.
Der Vorschau-Inspector ist für alle kostenlosen Shopify-Themes verfügbar und standardmäßig aktiviert. Du kannst auf die Schaltfläche 
klicken, um den Vorschau-Inspector während der Bearbeitung an- oder auszuschalten.
Wenn der Vorschau-Inspector aktiviert ist, kannst du auf ein beliebiges markiertes Element klicken, um die entsprechende Einstellung zu öffnen. Wenn der Vorschau-Inspector aktiviert ist, kannst du auf einem Mobilgerät auf ein beliebiges Element klicken, um die entsprechende Einstellung auszuwählen. Du kannst das untere Blatt öffnen, um Änderungen über diese ausgewählte Einstellung vorzunehmen.
Der Vorschau-Inspector zeigt einen der zwei folgenden unterschiedlichen Rahmen um die Abschnitte und Blöcke an, auf die im Vorschaufenster geklickt wird:
- Die durchgehende blaue Linie zeigt den aktiven Abschnitt an. Die entsprechende Einstellung im Seitenleistenmenü ist in Grau hervorgehoben.
- Die gepunktete blaue Linie zeigt den zugehörigen Block für den Abschnitt an. Wenn du auf das Element im Vorschaufenster klickst, werden die Einstellungen für den Block oder Abschnitt geöffnet.
Wenn du auf einen beliebigen Teil deiner Website im Vorschaufenster klickst, werden die entsprechenden Einstellungen in deiner Seitenleiste geladen. Auf einem Mobilgerät kannst du durch doppeltes Tippen wie ein Kunde über die Website navigieren.
Abschnitte und Blöcke im Vorschau-Inspector hinzufügen
Wenn du den Vorschau-Inspector verwendest, kannst du dem Theme direkt im Vorschaufenster Abschnitte und Blöcke hinzufügen. Um den Vorschau-Inspector in der Shopify-App zu verwenden, drücke lange auf einen Abschnitt, um ihn zu bearbeiten.
| Tool | Beschreibung |
|---|---|
| Abschnitt hinzufügen | Die Schaltfläche Abschnitt hinzufügen wird oben und unten im ausgewählten Abschnitt angezeigt. Klicke auf die Schaltfläche Abschnitt hinzufügen, um einen neuen Abschnitt entweder über oder unter dem ausgewählten Abschnitt hinzuzufügen. |
| Block hinzufügen | Die Schaltfläche Block hinzufügen wird angezeigt, wenn du mit der Maus über einen vorhandenen Block fährst. Um einen Block hinzuzufügen, bewege deinen Cursor über die Schaltfläche  . Es wird ein Pop-up-Menü mit den Theme- und App-Blöcken angezeigt, die zum ausgewählten Abschnitt hinzugefügt werden können. Klicke auf den Block, den du hinzufügen möchtest. Das Einstellungsfenster für den neuen Block lädt in der rechten Seitenleiste.
|
Vorschau-Inspector-Tools
Mit dem Vorschau-Inspector kannst du Abschnitte und Blöcke im Theme-Editor verschieben, ausblenden, duplizieren oder löschen.
| Tool | Aktion | Beschreibung |
|---|---|---|
 | Zur vorherigen Position verschieben | Mit dieser Schaltfläche kannst du einen Abschnitt oder Block im Vorschau-Inspector mithilfe der Pfeilsymbole an die nächste Position oder die vorherige Position verschieben. Wenn sich der ausgewählte Abschnitt oben auf deiner Seite befindet, wird die Schaltfläche ausgegraut. Wenn sich dein Abschnitt unten auf der Seite befindet, kannst du die Schaltfläche  ebenfalls nicht verwenden. |
| Zur nächsten Position verschieben | |
 | Abschnitt oder Block duplizieren | Klicke auf diese Schaltfläche, um einen Abschnitt oder Block und dessen Inhalt zu duplizieren. |
 | Abschnitt oder Block ausblenden | Mit dieser Schaltfläche kannst du einen Abschnitt oder Block ausblenden. Wenn ein Abschnitt oder Block ausgeblendet ist, kannst du ihn im Vorschau-Inspector nicht einblenden. Um ihn wieder einzublenden, kannst du entweder in der Menüleiste auf die Schaltfläche  klicken oder im Menü der Seitenleiste neben dem Abschnitt bzw. Block auf die Schaltfläche klicken. |
 | Abschnitt oder Block löschen | Diese Schaltfläche löscht den ausgewählten Abschnitt oder Block im Vorschau-Inspector. |
Unterschiedliche Bildschirmgrößen im Theme-Editor anzeigen
Im Theme-Editor kannst du unterschiedliche Bildschirmgrößen anzeigen. Du kannst den Theme-Editor so ändern, dass er die Größe des Desktops, des Mobilgeräts oder des Vollbilds anzeigt, um sicherzustellen, dass deine Theme-Änderungen für unterschiedliche Bildschirmgrößen optimal passen, und um alternative Layouts für Desktop und Mobilgeräte zu kontrollieren. Klicke in der Menüleiste auf die folgende Schaltfläche, um die Bildschirmgröße zu ändern:
- Klicke für den Desktop auf die Schaltfläche
. - Klicke für Mobilgeräte auf die Schaltfläche
. - Klicke für den Vollbildmodus auf die Schaltfläche
.
Aktionen rückgängig machen und erneut durchführen
Mit der Schaltfläche und der Schaltfläche 
kannst du nicht gespeicherte Anpassungen rückgängig machen oder wiederherstellen. Nachdem deine Änderungen gespeichert wurden, kannst du sie nicht mehr wiederherstellen oder rückgängig machen.
Wenn keine ungespeicherten Anpassungen zum Wiederherstellen, Rückgängigmachen oder beidem vorliegen, ist die entsprechende Schaltfläche ausgegraut.
Seitenleistenmenü
Das Seitenleistenmenü zeigt jetzt eine Strukturansicht des gesamten Inhalts der Vorlage an, die du derzeit in der Seitenleiste anzeigen lässt. Du kannst Abschnitte, Blöcke und Einstellungen über das Seitenleistenmenü verwalten.
Seitenleistenmodi
Der Theme-Editor bietet zwei Modi an, um den ganzen Platz auf deinem Bildschirm zu nutzen.
Der doppelte Seitenleistenmodus ist für breitere Browserfenster und größere Bildschirme und der einzelne Seitenleistenmodus für schmalere Browserfenster und kleinere Bildschirme optimiert. Der Seitenleistenmodus bestimmt, wo das Einstellungsfenster im Editor angezeigt wird.
Doppelter Seitenleistenmodus
Wenn du einen Bildschirm hast, der größer als 1600 Pixel breit ist, und dein Browserfenster vollständig oder auf mindestens 1600 Pixel erweitert ist, werden zwei Seitenleisten angezeigt. Die linke Seitenleiste enthält das Navigationsfenster und die rechte Seitenleiste enthält das Einstellungsfenster.
Um den Theme-Editor im einzelnen Seitenleistenmodus auf einem großen Bildschirm anzuzeigen, mache dein Browserfenster schmaler, bis das Einstellungsfenster sich über die Navigationsseitenleiste bewegt oder verschwindet.
Einzelner Seitenleistenmodus
Schmalere Browser haben nur eine Seitenleiste, um Platz für die Theme-Vorschau zu schaffen. Wenn du auf einen Abschnitt oder Block klickst, um ihn zu bearbeiten, wird das Einstellungsfenster über deinem Navigationsfenster in der Seitenleiste geöffnet.
Abschnitte und Blöcke
In der Liste der Abschnitte und Blöcke werden standardmäßig alle Blöcke für die Abschnitte auf einer Seite angezeigt.
Abschnitte, die die Kopf- oder Fußzeile bilden, werden standardmäßig minimiert. Du kannst auf die Schaltfläche 
neben einem Abschnittsnamen klicken, um dessen Inhalt anzuzeigen.
Abschnittsgruppen
Abschnitte sind für jede Seitenvorlage in deinem Theme in die folgenden Bereiche gruppiert:
- Header: Dazu gehören dein Header, die Ankündigungsleiste und alle Apps oder benutzerdefiniertes Liquid.
- Vorlage: Dies schließt Abschnitte ein, die den Hauptteil deiner Seite umfassen. Beispielsweise können die Vorlagenabschnitte Blog-Beiträge, Collagen, Kategorielisten oder benutzerdefiniertes Liquid enthalten.
- Fußzeile: Dazu gehören deine Fußzeile, die E-Mail-Anmeldung und alle Apps oder benutzerdefiniertes Liquid.
Deine Kopf- und Fußzeile wird auf allen Seiten deines Onlineshops geteilt. Wenn du zum Beispiel einen benutzerdefinierten Liquid-Block zum Header hinzufügst, wird dieses benutzerdefinierte Liquid auf allen deinen Produktseiten, der Startseite und allen anderen Seiten angezeigt.
Abschnitte und Blöcke erweitern und minimieren
Erweitere einen Abschnittsknoten mit der Schaltfläche , um dessen Blöcke anzuzeigen, oder minimiere ihn mit der Schaltfläche 
, um die Blöcke auszublenden. Du kannst auf einen beliebigen Abschnitt oder Block klicken, um dessen Einstellungen zu sehen.
Abschnitte und Blöcke verschieben
Du kannst einen Abschnitt oder einen Block von einem Bereich der Seite in einen anderen Bereich verschieben, indem du die Schaltfläche 
verwendest, um auf den Abschnitt oder den Block zu klicken, ihn zu ziehen und dann an einer anderen verfügbaren Stelle abzulegen.
Wenn du versuchst, einen Abschnitt oder Block dorthin zu verschieben, wo dies nicht zulässig ist, wird der Abschnitt oder Block wieder am ursprünglichen Standort abgelegt.
Abschnitte und Blöcke entfernen
Du kannst einen Abschnitt oder Block aus einer Vorlage auf eine der folgenden zwei Arten entfernen:
Bewege den Cursor neben den Abschnittsnamen und klicke dann auf die Schaltfläche
: 
Klicke auf den Abschnittsnamen und dann in den Abschnittseinstellungen auf Abschnitt entfernen:
Schritte:
Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
Klicke neben dem Theme, das du bearbeiten möchtest, auf Anpassen.
Klicke in der Seitenleiste des Theme-Editors auf den Abschnitt oder Block, den du entfernen möchtest.
Klicke auf Abschnitt entfernen oder Block entfernen.
Klicke auf Speichern. Wenn du ein veröffentlichtes Theme bearbeitest, dann wähle Veröffentlichen, um deine Änderungen zu speichern und sie in deinem Shop live zu schalten.
Abschnitte oder Blöcke ausblenden
Du kannst alle Abschnitte oder Blöcke mit der Schaltfläche ausblenden:
