Dein Theme bearbeiten

Du kannst dein Theme ändern und damit die Inhalte, das Layout, die Typografie und die Farben des Onlineshops individuell anpassen. Jedes Theme bietet Abschnitte und Einstellungen, mit denen du das Erscheinungsbild deines Shops ändern kannst, ohne Code bearbeiten zu müssen.

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-Editor

Der Theme-Editor zeigt eine Strukturansicht des gesamten Inhalts der Vorlage an, die du derzeit in der Seitenleiste anzeigen lässt. Erweitere einen Abschnittsknoten mit dem Erweiterungssymbol , um dessen Blöcke anzuzeigen, oder minimiere ihn mit dem Minimiersymbol , um die Blöcke auszublenden. Du kannst auf einen beliebigen Abschnitt oder Block klicken, um dessen Einstellungen zu sehen.

Abschnitte erweitern und minimieren, um Blöcke anzuzeigen

Auf den Theme-Editor zugreifen

  1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

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

  3. Klicke auf Abschnitte.

Vorschau-Inspector

Der Vorschau-Inspector ist eine neue Funktion des Theme-Editors. Damit 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 in deinem Vorschaufenster neu anordnen, ausblenden oder löschen.

Der Vorschau-Inspector ist für alle kostenlosen Shopify-Themes verfügbar und standardmäßig aktiviert. Du kannst den Vorschau-Inspector während der Bearbeitungssitzung ein- oder ausschalten.

Schalte den Vorschau-Inspector mit dem Umschalter in deiner Startleiste ein- oder aus

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.

Vorschau-Inspector mit Abschnitt

Der Vorschau-Inspector zeigt zwei unterschiedliche Rahmen um die Abschnitte und Blöcke an, auf die im Vorschaufenster geklickt wird:

  • Durchgehende blaue Linie: Der aktive Abschnitt. Die entsprechende Einstellung in der Seitenleiste ist in Grau hervorgehoben.
  • Gepunktete blaue Linie: Ein zugehöriger Block für den Abschnitt. 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

Während du den Vorschau-Inspector verwendest, kannst du deinem Theme direkt im Vorschaufenster Abschnitte und Blöcke hinzufügen. Auf einem Mobilgerät kannst du Abschnitte hinzufügen, duplizieren, ausblenden, verschieben und löschen, indem du den Bearbeitungsmodus im unteren Blatt verwendest.

Option „Abschnitt hinzufügen“ im Preview-Inspector
Option „Block hinzufügen“ im Preview-Inspector
Beschreibungen der Schaltflächen "Abschnitte hinzufügen" und "Blöcke hinzufügen" im Vorschau-Inspector.
ToolBeschreibung
Abschnitt hinzufügenDie Schaltfläche Abschnitt hinzufügen wird oben und unten im ausgewählten Abschnitt angezeigt. Klicke auf Abschnitt hinzufügen, um einen neuen Abschnitt entweder über oder unter dem ausgewählten Abschnitt hinzuzufügen.
Block hinzufügenDie Schaltfläche Block hinzufügen wird angezeigt, wenn du mit der Maus über einen vorhandenen Block fährst. Um einen Block hinzuzufügen, klicke auf das +-Symbol. 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-Set zum Preview-Inspector
Liste der verfügbaren Vorschau-Inspector-Tools, einschließlich Verschieben, Duplizieren, Ausblenden und Löschen von Abschnitten oder Blöcken.
ToolBeschreibung
Zur nächsten/vorherigen Position verschiebenDu kannst einen Abschnitt oder Block mithilfe der Pfeilsymbole im Vorschau-Inspector 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 Zur vorherigen Position verschieben ausgegraut. Genauso gilt auch: Wenn sich dein Abschnitt unten auf der Seite befindet, kannst du die Schaltfläche Zur nächsten Position verschieben nicht verwenden.
Abschnitt oder Block duplizierenKlicke auf das Kopiersymbol, um einen Abschnitt oder Block und dessen Inhalt zu duplizieren.
Abschnitt oder Block ausblendenKlicke auf das Augensymbol, um einen Abschnitt oder Block auszublenden. Wenn ein Abschnitt oder Block ausgeblendet ist, kannst du ihn im Vorschau-Inspector nicht einblenden. Du kannst entweder auf die Schaltfläche Rückgängig machen in deiner Startleiste klicken oder das Einstellungsfenster schließen, um zur Startseite des Theme-Editors zurückzukehren, wo dir alle ausgeblendeten Abschnitte oder Blöcke mit durchgestrichenem Augensymbol in deiner Seitenleiste angezeigt werden. Klicke auf dieses Symbol, um den Abschnitt oder den Block einzublenden.
Abschnitt oder Block löschenKlicke auf das Papierkorbsymbol, um den ausgewählten Abschnitt oder Block im Vorschau-Inspector zu löschen.

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.

Im doppelten Seitenleistenmodus wird das Einstellungsfenster auf der rechten Seite des Bildschirms angezeigt

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.

Im einzelnen Seitenleistenmodus wird das Einstellungsfenster als Überlagerung des Navigationsfensters angezeigt

Abschnittsgruppen

Abschnitte sind in jeder Seitenvorlage 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. Du kannst die Abschnitte nach Bedarf neu anordnen.

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, aus denen der Header oder die Fußzeile besteht, werden standardmäßig minimiert. Du kannst sie jedoch sehen, wenn du auf das Erweiterungssymbol > neben dem Abschnittsnamen klickst.

Abschnitte und Blöcke verschieben

Du kannst einen Abschnitt oder einen Block von einem Bereich der Seite in einen anderen Bereich verschieben, indem du das Symbol ⋮⋮ 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.

Entfernen von Abschnitten

Du kannst für jedes Element auf dem Einstellungsbildschirm einen Abschnitt oder Block aus einer Vorlage löschen. Die Schaltfläche Abschnitt entfernen wird unten in den Abschnittseinstellungen angezeigt.

Entferne einen Abschnitt mithilfe der Schaltfläche

Schritte:

  1. Klicke in der Seitenleiste des Theme-Editors auf den Abschnitt oder Block, den du entfernen möchtest.
  2. Klicke auf Abschnitt entfernen oder Block entfernen.
  3. Klicke auf Speichern. Wenn du ein veröffentlichtes Theme bearbeitest, dann klicke auf Veröffentlichen, um deine Änderungen zu speichern und sie in deinem Shop live zu schalten.

Blöcke ausblenden

Du kannst alle Abschnitte oder Blöcke mit dem Augensymbol ausblenden.

Entferne einen Abschnitt mithilfe der Schaltfläche

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

Wenn du eine Vorlage anzeigst, kannst du sehen, wie sie mit jeder kompatiblen Ressource in deinem Shop aussieht. Wenn du beispielsweise eine Produktvorlage anzeigst, kannst du diese mit jedem Produkt in deinem Shop testen.

Schritte:

  1. Wähle in der Auswahlfunktion für den Theme-Editor die Vorlage aus, die du in der Vorschau anzeigen möchtest.
  2. Klicke im Navigationsfenster im Abschnitt Vorschau auf Ändern.
  3. Wähle im Menü Auswählen die Ressource aus, die du in der Vorschau anzeigen möchtest.

Aktionen rückgängig machen und erneut durchführen

Die Schaltflächen Rückgängig machen und Wiederherstellen befinden sich oben rechts im Theme-Editor.

Die Schaltflächen

Inline-Bearbeitung von benutzerdefinierten Daten

Wenn du mit benutzerdefinierten Daten arbeitest, um Metaobjekt-Seiten zu erstellen, kannst du deine Metafelder und Metaobjekte direkt inline bearbeiten, ohne für Änderungen in den Adminbereich navigieren zu müssen. Dies funktioniert für Bild-, Video-, Farb-, Produkt-, Seiten-, Kollektions- und Text-Metafelder.

Schritte:

  1. Wähle in deinem Theme eine kompatible Einstellung aus, die auf dein Metaobjekt verweist.
  2. Wähle im Einstellungsfenster den Metafeldwert in deinem Metaobjekt-Eintrag aus und bearbeite den Wert.
  3. Speichere deine Arbeit und deine Landing Page wird automatisch mit den aktualisierten Informationen geladen.

Dokumentation ansehen, Support erhalten und Theme-Version überprüfen

Die Links zur Dokumentation und den Support-Informationen deines Themes sind im Menü Mehr in der Menüleiste zu finden. In diesem Menü kannst du auch die Version des Themes und Informationen über den Entwickler einsehen.

Verwende die Schaltfläche

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.

In diesem Abschnitt

Du hast die gesuchten Antworten nicht gefunden? Wir helfen dir gerne weiter.