Theme bearbeiten

Ausgewählte Links

1. Theme bearbeiten
2. Shopify-Dokumentation zum Theme-Editor
3. Theme duplizieren
4. Shopify-Dokumentation zum Theme-Support
5. Bilder hochladen
6. Themes
7. Code-Editor
8. Standardformulierungen in Ihrem Theme bearbeiten
9. Vorschau Ihres Themes
10. Theme-Dokumentation

Hilfreiche Videos

Shopify Academy-Video: Ihren Store anpassen

Shopify Academy-Video: Ihren Store anpassen

Verwenden Sie den Shopify-Theme-Editor, um Inhalte, Layout, Typografie und Farben Ihres Align-Themes anzupassen, ohne Code zu bearbeiten. Mit Abschnitten und Einstellungen können Sie Ihren Store anpassen und gleichzeitig in einer Live-Vorschau arbeiten.

Bevor Sie Ihr Theme anpassen

Bereiten Sie sich vor größeren Änderungen vor, damit Sie unbesorgt experimentieren können.

1. Duplizieren Sie Ihr Theme, um eine Sicherungskopie zu erstellen. Bei Bedarf können Sie Änderungen verwerfen und anhand der Kopie erneut beginnen.
2. Prüfen Sie die verfügbare Supportstufe
3. Prüfen Sie die Anforderungen und Best Practices zum Hochladen von Bildern

Tipp

Duplizieren Sie Align, bevor Sie größere Layout- oder Inhaltsänderungen vornehmen, insbesondere beim Bearbeiten Ihres veröffentlichten Themes.

Auf den Theme-Editor zugreifen

Der Theme-Editor zeigt eine Baumansicht der Inhalte in der Vorlage an, die Sie gerade betrachten. Wählen Sie einen Abschnitt oder Block aus, um dessen Einstellungen zu öffnen. Verwenden Sie ▸, um einen Abschnitt aufzuklappen, und ▾, um ihn zuzuklappen.

1. Gehen Sie in Ihrem Shopify-Admin zu Online Store > Themes
2. Klicken Sie neben dem Align-Theme, das Sie bearbeiten möchten, auf Customize.

Die Menüleiste verwenden

Die Menüleiste bietet Theme-Informationen, Navigation, Bearbeitungswerkzeuge und Speicherfunktionen.

Verwenden Sie die Menüleiste, um:

1. Zum Shopify-Admin zurückzukehren und den Namen und Status Ihres Themes zu prüfen. Ein veröffentlichtes Theme ist mit Live gekennzeichnet; unveröffentlichte Themes sind mit Draft gekennzeichnet.

2. Das Aktionsmenü zu öffnen, um:

   • Edit code zu verwenden und den Code-Editor zu öffnen.
   • Edit default theme content zu verwenden, um die Standardformulierungen in Ihrem Theme zu bearbeiten
   • Eine Vorschau Ihres Themes zu öffnen.
   • View documentation zu verwenden, um die Dokumentation Ihres Themes zu öffnen.
   • Verfügbare Tastaturkürzel zu prüfen.
   • Get support zu verwenden, um Support zu erhalten

3. Zwischen Märkten und Vorlagen zu wechseln.

4. Sidekick oder den Vorschauinspektor zu aktivieren oder zu deaktivieren.

5. Die Vorschau mit Steuerelementen für die Bildschirmgröße zu ändern, Rückgängig- und Wiederholen-Steuerelemente zu verwenden und Ihre Änderungen zu speichern.

Dokumentation, Support und Theme-Details anzeigen

Öffnen Sie das Menü in der Menüleiste, um Theme-Details einschließlich Version und Entwicklerinformationen anzuzeigen. Dieses Menü enthält außerdem Links zur Theme-Dokumentation und zu Supportinformationen.

Hilfe bei Anpassungen erhalten

Wenn Sie Hilfe bei der Verwendung oder Anpassung von Align benötigen, beginnen Sie mit der Company XYZ-Dokumentation und kontaktieren Sie den Company XYZ-Support. Für Fragen zu Shopify-Admin, Abrechnung, Konto oder Plattform verwenden Sie die Shopify-Supportoptionen. Sie können außerdem die Shopify-Anleitung zum Kontaktieren des Theme-Entwicklers für Support sowie Zusätzliche Ressourcen für Theme-Support lesen.

Tastaturkürzel verwenden

Mit Tastaturkürzeln können Sie häufige Navigations- und Bearbeitungsaufgaben im Theme-Editor beschleunigen.

Kategorie	Aktion	Tastenkürzel unter Windows	Tastenkürzel unter macOS
Allgemein	Rückgängig	CTRL • Z	⌘ • Z
	Wiederholen	CTRL • Y	⌘ • Y
	Speichern	CTRL • S	⌘ • ⇧ • S
	Alle Tastenkürzel anzeigen	CTRL • /	⌘ • /
Werkzeuge	Vorschauinspektor	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	Ein- und ausblenden	CTRL • SHIFT • H	⌘ • ⇧ • H
	Entfernen	SHIFT • ⭠	⇧ • ⌫
	Vorheriges auswählen	SHIFT • ←	⇧ • ▲
	Nächstes auswählen	SHIFT • →	⇧ • ▼
	Ausgewähltes Element öffnen	SHIFT • ENTER	⇧ • ▼
	Alle Abschnitte aufklappen	CTRL • SHIFT • O	⌘ • ⇧ • O
	Alle Abschnitte zuklappen	CTRL • SHIFT • P	⌘ • ⇧ • P

Vorlagen auswählen und in der Vorschau anzeigen

Verwenden Sie die Seitenauswahl in der oberen Leiste, um auf die Vorlagen Ihres Align-Themes zuzugreifen.

Mit einem kompatiblen Theme können Sie direkt über die Seitenauswahl eine Vorlage erstellen, indem Sie New template auswählen.

Eine Vorlage mit einer bestimmten Ressource in der Vorschau anzeigen

Sie können eine kompatible Vorlage mit jeder passenden Ressource in Ihrem Store in der Vorschau anzeigen. Zeigen Sie beispielsweise eine Produktvorlage mit verschiedenen Produkten in der Vorschau an, um zu prüfen, wie deren Inhalte dargestellt werden. Sie müssen die Vorlage der Ressource weiterhin im Shopify-Admin zuweisen.

Sie können Vorlagen und Ressourcen über die Search-Leiste in der Seitenauswahl, Add section, Add block oder App embeds suchen.

1. Gehen Sie in Ihrem Shopify-Admin zu Online Store > Themes
2. Klicken Sie neben dem Align-Theme, das Sie bearbeiten möchten, auf Customize.
3. Wählen Sie im Vorlagenmenü die Vorlage aus, die Sie in der Vorschau anzeigen möchten.
4. Klicken Sie im Abschnitt Preview des Seitenleistenmenüs auf Change.
5. Wählen Sie im Menü Select die Ressource aus, die Sie in der Vorschau anzeigen möchten.

Den Vorschauinspektor verwenden

Mit dem Vorschauinspektor können Sie Abschnitte und Blöcke direkt in der Vorschau auswählen und ihre Einstellungen schnell finden. Sie können Abschnitte und Blöcke außerdem im Vorschaufenster neu anordnen, ausblenden oder duplizieren.

Wenn der Vorschauinspektor aktiv ist, wählen Sie ein umrandetes Element aus, um dessen Einstellungen zu öffnen. Wählen Sie auf einem Mobilgerät ein Element aus und öffnen Sie das untere Fenster, um seine Einstellungen zu bearbeiten.

Die Umrandung zeigt an, was Sie ausgewählt haben:

1. Eine durchgezogene blaue Linie kennzeichnet den aktiven Abschnitt. Seine Einstellungen sind in der Seitenleiste grau hervorgehoben.
2. Eine gepunktete blaue Linie kennzeichnet einen Block, der dem ausgewählten Abschnitt zugeordnet ist. Wählen Sie ihn aus, um die Block- oder Abschnittseinstellungen zu öffnen.

Wenn Sie einen Bereich in der Vorschau auswählen, werden dessen Einstellungen in der Seitenleiste geladen. Tippen Sie auf einem Mobilgerät zweimal, um auf der Website so zu navigieren wie ein Kunde.

Abschnitte und Blöcke über die Vorschau hinzufügen

Sie können Abschnitte und Blöcke direkt über den Vorschauinspektor hinzufügen. Halten Sie in der Shopify-App einen Abschnitt lange gedrückt, um ihn zu verwalten.

Werkzeug	Description
Add section	Die Schaltfläche Add section wird über und unter dem ausgewählten Abschnitt angezeigt. Wählen Sie sie aus, um über oder unter dem aktuellen Abschnitt einen Abschnitt einzufügen.
Add block	Die Schaltfläche Add block wird angezeigt, wenn Sie den Mauszeiger über einen Block bewegen. Bewegen Sie den Cursor über die Schaltfläche, wählen Sie einen verfügbaren Theme- oder App-Block aus und bearbeiten Sie den neuen Block anschließend in der rechten Seitenleiste.

Elemente über die Vorschau verwalten

Verwenden Sie den Vorschauinspektor, um Abschnitte und Blöcke zu verschieben, auszublenden, zu duplizieren oder zu löschen.

Verschiedene Bildschirmgrößen prüfen

Wechseln Sie in der Vorschau zwischen Desktop-, Mobil- und Vollbildgröße, um zu prüfen, wie Ihre Änderungen in verschiedenen Layouts funktionieren. Verwenden Sie die Schaltflächen für die Bildschirmgröße in der Menüleiste, um Desktop, Mobilgerät oder Vollbild auszuwählen.

Änderungen rückgängig machen und wiederholen

Verwenden Sie die Schaltflächen undo und redo, um nicht gespeicherte Anpassungen rückgängig zu machen oder wiederherzustellen. Nach dem Speichern können diese Änderungen nicht mehr rückgängig gemacht oder wiederholt werden. Die Schaltflächen sind deaktiviert, wenn keine Änderungen zum Rückgängigmachen oder Wiederholen verfügbar sind.

Mit der Seitenleiste arbeiten

Die Seitenleiste zeigt eine Baumansicht der Inhalte der aktuellen Vorlage. Verwenden Sie sie, um Abschnitte, Blöcke und deren Einstellungen zu verwalten.

Modi der Seitenleiste

Der Editor verwendet je nach verfügbarer Bildschirmbreite eine oder zwei Seitenleisten.

1. Der Modus mit zwei Seitenleisten wird auf breiteren Bildschirmen verwendet. Das Navigationspanel wird links und das Einstellungspanel rechts angezeigt.
2. Der Modus mit einer Seitenleiste wird in schmaleren Browserfenstern verwendet, damit mehr Platz für die Vorschau bleibt. Wenn Sie einen Abschnitt oder Block auswählen, wird das Einstellungspanel über dem Navigationspanel geöffnet.

Modus mit zwei Seitenleisten

Wenn Ihr Bildschirm und das vollständig erweiterte Browserfenster mindestens 1600 Pixel breit sind, zeigt der Editor zwei Seitenleisten an.

Um auf einem großen Bildschirm den Modus mit einer Seitenleiste zu verwenden, verkleinern Sie das Browserfenster, bis das Einstellungspanel die Navigationsseitenleiste überlagert oder daraus verschwindet.

Modus mit einer Seitenleiste

In schmaleren Browserfenstern zeigt der Editor eine Seitenleiste an, damit mehr Platz für die Vorschau bleibt. Wählen Sie einen Abschnitt oder Block aus, um seine Einstellungen über dem Navigationspanel zu öffnen.

Abschnitte und Blöcke verwalten

Die Seitenleiste listet die Abschnitte und Blöcke der aktuellen Seite auf. Blöcke werden standardmäßig angezeigt, während Header- und Footer-Abschnitte standardmäßig zugeklappt sind.

Abschnittsgruppen verstehen

Jede Seitenvorlage organisiert Abschnitte in diesen Bereichen:

1. Header enthält den Header, die Ankündigungsleiste sowie alle Apps oder benutzerdefinierten Liquid-Inhalte.
2. Template enthält den Hauptinhalt der Seite, z. B. Blogbeiträge, Collagen, Kollektionslisten oder benutzerdefiniertes Liquid.
3. Footer enthält den Footer, die E-Mail-Anmeldung sowie alle Apps oder benutzerdefinierten Liquid-Inhalte.

Änderungen an Header und Footer gelten für die Seiten Ihres gesamten Stores. Beispielsweise wird benutzerdefiniertes Liquid, das dem Header hinzugefügt wurde, auf Produktseiten, der Startseite und anderen Seiten angezeigt.

Elemente auf- und zuklappen

Wählen Sie die Schaltfläche neben einem Abschnittsnamen aus, um dessen Inhalte ein- oder auszublenden. Wählen Sie einen Abschnitt oder Block aus, um dessen Einstellungen zu öffnen.

Abschnitte und Blöcke verschieben

Ziehen Sie einen Abschnitt oder Block am Griff ::: und legen Sie ihn an einer verfügbaren Stelle ab. Wenn der betreffende Ort dieses Element nicht zulässt, wird es an seine ursprüngliche Position zurückgesetzt.

Abschnitte und Blöcke entfernen

Sie können einen Abschnitt oder Block auf zwei Arten entfernen:

1. Bewegen Sie den Mauszeiger neben den Abschnittsnamen und wählen Sie die Schaltfläche zum Entfernen aus.

   

2. Wählen Sie den Abschnitt aus und wählen Sie anschließend in dessen Einstellungen Remove section.

   

So entfernen Sie ein Element aus der Seitenleiste:

1. Gehen Sie in Ihrem Shopify-Admin zu Online Store > Themes
2. Klicken Sie neben dem Align-Theme, das Sie bearbeiten möchten, auf Customize.
3. Wählen Sie in der Seitenleiste den Abschnitt oder Block aus, den Sie entfernen möchten.
4. Klicken Sie auf Remove section oder Remove block.
5. Klicken Sie auf Save. Wenn Sie ein veröffentlichtes Theme bearbeiten, klicken Sie auf Publish, um die Änderungen zu speichern und in Ihrem Store live zu schalten.

Abschnitte und Blöcke ausblenden

Wählen Sie die Schaltfläche 👁️ aus, um einen Abschnitt oder Block auszublenden.

Nutzungshinweise

1. Schützen Sie Ihren Ausgangspunkt. Erstellen Sie ein Theme-Duplikat, bevor Sie mit wesentlichen Änderungen experimentieren.
2. Zeigen Sie relevante Inhalte in der Vorschau an. Testen Sie Vorlagen mit den Produkten, Kollektionen oder anderen Ressourcen, die darin angezeigt werden.
3. Prüfen Sie responsive Layouts. Überprüfen Sie Desktop- und Mobilvorschauen, bevor Sie speichern oder veröffentlichen.
4. Beachten Sie gemeinsam verwendete Bereiche. Änderungen an Header oder Footer wirken sich auf Seiten in Ihrem gesamten Store aus.
5. Speichern Sie bewusst. Rückgängig machen und Wiederholen funktionieren nur für nicht gespeicherte Änderungen.