Dokumentation Entwickler Guides

Theme-Editor

Aktualisiert am 16.03.2017

Theme-Editor

Der Theme-Editor (Editor) ist ein Werkzeug, mit dem die Dateien eines Shop-Themes im Browser bearbeitet werden können. Geöffnet werden kann der Editor durch einen Klick des HTML-&-CSS-bearbeiten-Buttons im Administrations-Bereich unter “Design”.

Aufteilung

Der Editor ist eine in zwei Spalten aufgeteilte Webseite:

Theme-Editor

In der dunkelhinterlegten linken Spalte befindet sich eine Liste der sich im Theme befindlichen Dateien. Die weißhinterlegte rechte Spalte ist zur Bearbeitung der Dateien vorgesehen.

Dateien bearbeiten

Um eine Datei bearbeiten zu können, genügt ein Klick auf den Dateinamen in der linken Spalte. Daraufhin erscheint in der rechten Spalte ein großes Textfeld, in dem der Dateiinhalt dargestellt wird. Dieser Dateiinhalt lässt sich nun verändern.

Theme-Editor

Sind die Änderungen abgeschlossen, genügt ein Klick auf den grünen Speichern-Button, um die Änderungen wirksam zu machen. Der Speichern-Button erscheint nur dann, wenn sich der Dateiinhalt verändert hat.

Theme-Editor

Tab-Leiste

Sobald eine Datei geöffnet wurde, erscheint am oberen Rand der rechten Spalte eine Tab-Leiste, in der alle geöffneten Dateien sichtbar sind. Mit einem Klick auf ein Tab öffnet sich die Datei. Das Kreuz am rechten Rand eines Tabs schließt die Datei.

Datei umbenennen/löschen

Sobald eine Datei geöffnet wurde ist der Dateiname unterhalb der Tab-Leiste zu erkennen. Dieser kann verändert und durch einen Klick auf den dann erscheinenden „Umbenennen“-Button bestätigt werden:

Theme-Editor

Soll eine Datei gelöscht werden, genügt ein Klick auf den „Löschen“-Link neben dem Dateinamen unter der Tab-Leiste, der anschließend bestätigt werden muss:

Theme-Editor

Dateien erstellen

Wird in der linken Spalte unterhalb eines Verzeichnisses auf den Neue-Datei-Link geklickt, erscheint in der rechten Spalte eine Auswahl an Dateien. Die Auswahl beinhaltet vordefinierte Templates, die im Theme benutzt werden können. Zusätzlich befindet sich als letzte Auswahl eine leere Datei:

Theme-Editor

Nach der Auswahl der Datei genügt ein Klick auf den erscheinenden Anlegen-Button, um die Datei zu erstellen. Sie wird nach dem Erstellen automatisch geöffnet.

Drag & Drop

Zusätzlich ist es möglich, Dateien zu erstellen, indem man eine Datei vom lokalen Dateisystem per Drag & Drop im linken Bereich platziert:

Theme-Editor

Tastenkürzel

Der Editor verfügt außerdem über ein Tastenkürzel, das das Speichern von Dateien ohne Mausklick ermöglicht. Ist eine Datei im Editor geöffnet, so kann diese durch das Tastenkürzel Strg+s (Windows) bzw. Command+s (Mac OS) gespeichert werden.