Theme-Manager

Themes verwalten, bearbeiten, testen und aktivieren

Im Theme-Manager verwaltest Du installierte Shop-Themes, aktivierst oder kopierst Designs, pflegst Theme-Stammdaten und bearbeitest Themebereiche mit Parametern, CSS, HTML- und JavaScript-Versionen.

Inhaltsverzeichnis

Wofür der Theme-Manager da ist

Ein Theme bestimmt die sichtbare Gestaltung des Shops. Dazu gehören Layout, Farben, Bilder, Abstände, Schriften, Header, Footer, Produktansichten, Contentbereiche, Warenkorb und Checkout-Darstellung.

Die Theme-Verwaltung trennt Designarbeit von Produkt-, Kunden- und Bestelldaten. Dadurch können Designs vorbereitet, kopiert und per Vorschau geprüft werden, bevor ein Theme aktiv genutzt wird.

Theme-Änderungen können den sichtbaren Shop direkt beeinflussen. Größere Anpassungen sollten zuerst an einer Theme-Kopie und anschließend in der Vorschau geprüft werden.

Theme-Übersicht und Tabelle

Die Übersicht zeigt die installierten Themes in einer Tabelle. Die sichtbaren Spalten hängen teilweise vom Shoptyp und vom technischen Betriebsmodus ab.

  • Vorschau: zeigt ein Vorschaubild des Themes, wenn ein Bild gepflegt ist. Ohne Bild erscheint eine neutrale Leeranzeige.
  • Name: Bezeichnung des Themes. Diese Spalte ist die primäre Theme-Kennung in der Übersicht.
  • Typ: Theme-Typ aus der Theme-Verwaltung. Die Spalte ist auf kleinen Ansichten ausgeblendet.
  • PaketName: technischer Paketname; erscheint nur in Entwicklerumgebungen.
  • St: Kennzeichnung für Standard-Themes; erscheint nur in Entwicklerumgebungen.
  • Ex: Export-/Import-Markierung; erscheint nur in Entwicklerumgebungen und kann direkt umgeschaltet werden.
  • Aktiv: bei einem einzelnen Shop zeigt ein Radiobutton, welches Theme aktiv ist. Das Umschalten schreibt die Theme-Zuordnung und erzeugt die CSS-Ausgabe neu.
  • Multishops: bei mehreren Shops zeigt diese Spalte, welchen Shops das Theme zugeordnet ist.
  • Optionen: enthält Bearbeiten, Löschen, Kopieren, Elemente festlegen und Vorschau.
Tabellenspalten anpassen: In vielen Backend-Tabellen kannst du ueber die Tabelleneinstellungen festlegen, welche Spalten sichtbar sind. Blende selten benoetigte Spalten aus, wenn du eine kompaktere Arbeitsansicht brauchst, und aktiviere sie wieder, wenn du die Informationen pruefen oder bearbeiten willst.

Optionen in der Theme-Tabelle

  • Bearbeiten: öffnet die Theme-Stammdaten im Modal.
  • Löschen: entfernt ein Theme nach Bestätigung. Diese Aktion wird bei Standard-Themes nicht angeboten.
  • Kopieren: erstellt eine Kopie des Themes. Das ist der sichere Startpunkt für größere Anpassungen.
  • Elemente festlegen: öffnet den Themebereich-Editor für Parameter, CSS, Dateien und Versionen.
  • Vorschau: öffnet das Theme im Shopkontext, ohne es als aktives Theme zu setzen. Bei mehreren Shops kann vorher eine Shopauswahl erscheinen.
  • Aktiv setzen: bei einem einzelnen Shop kann das aktive Theme direkt über den Radiobutton gesetzt werden.
Die Vorschau ist keine Liveschaltung. Erst die aktive Theme-Zuordnung bestimmt, welches Design regulär im Shop verwendet wird.

Theme-Stammdaten bearbeiten

Die Aktion Bearbeiten öffnet ein Modal für die Stammdaten des Themes.

  • Bezeichnung: Pflichtfeld für den sichtbaren Theme-Namen in der Übersicht.
  • Bezeichnung (PackageName): Pflichtfeld nur in Entwicklerumgebungen. Es ordnet das Theme einem Paketnamen zu.
  • Beschreibung: Freitext zur Einordnung des Themes, zum Beispiel Einsatzzweck oder Besonderheiten.
  • Aktuelle Vorschau entfernen: erscheint, wenn bereits ein Vorschaubild vorhanden ist, und löscht dieses beim Speichern.
  • Vorschaubild: Datei-Upload für ein neues Vorschaubild des Themes.

Beim Speichern werden die Stammdaten aktualisiert. Wird ein neues Vorschaubild hochgeladen, ersetzt es das bisherige Bild.

Globale Theme-Einstellungen

Unterhalb der Theme-Tabelle stehen globale Einstellungen für die Theme-Verarbeitung.

  • Theme-Optimierung ist aktiv: entfernt unnötige Zeilenumbrüche aus der erzeugten HTML-Ausgabe. Das kann die Ausgabe schlanker machen, muss bei eigenem JavaScript aber sorgfältig geprüft werden.
  • Agenturmodus ist aktiv: deaktiviert die dynamische Themebearbeitung im Backend. Der Modus ist für externe Dateibearbeitung gedacht; solange er aktiv ist, ist die normale Bearbeitung von Themebereichen gesperrt.
Bei aktivierter Theme-Optimierung können eigene Skripte empfindlich auf Kommentarzeilen oder Formatierungsänderungen reagieren. Nach dem Aktivieren unbedingt wichtige Frontend-Seiten testen.

Themebereiche bearbeiten

Über Elemente festlegen öffnest Du den Themebereich-Editor für das ausgewählte Theme. Dort werden Bereiche, Parameter, CSS und Dateiversionen gepflegt.

  • Zurück zur Themeauswahl: führt zurück zur Theme-Tabelle.
  • Vorschau anzeigen / Im Shop anzeigen: öffnet das Theme im passenden Shopkontext.
  • Eigenes CSS: öffnet ein Modal für zusätzlichen CSS-Code des Themes.
  • Bild-Manager: öffnet die Verwaltung der Themebilder.
  • Themebereiche: linke Navigation mit Bereichsgruppen und einzelnen Themebereichen.
  • Direkt zu... springt direkt zu einem ausgewählten Themebereich.
  • Alle auf / Alle zu: öffnet oder schließt die Bereichsgruppen.

Wenn der Agenturmodus aktiv ist, zeigt der Editor einen Hinweis und bricht die dynamische Bearbeitung ab.

Alle Parameter

Ohne ausgewählten Einzelbereich zeigt der Editor Alle Parameter des Themes gruppiert nach Themebereich.

  • Parameter suchen: filtert die Parameter nach Gruppennamen, Bereichsnamen, Label, Parametername und Beschreibung.
  • Parameter speichern: speichert alle geänderten Parameterwerte.
  • Alle auf / Alle zu: öffnet oder schließt alle Parametergruppen.
  • Parametergruppen: zeigen die Anzahl der enthaltenen Parameter.

Parameter sind der bevorzugte Weg für normale Designänderungen, weil sie strukturierte Eingabefelder verwenden und ohne direkten Codeeingriff auskommen.

Einzelnen Themebereich bearbeiten

Ein ausgewählter Themebereich zeigt Metadaten und je nach Bereich unterschiedliche Bearbeitungsblöcke.

  • Datei: zeigt die zugehörige Theme-Datei oder JavaScript-Datei.
  • Beschreibung: erklärt den Zweck des Bereichs.
  • CSS-Bearbeitungs-Modus: wechselt bei Themebereichen zwischen dynamisch und statisch.
  • Gesperrt: sperrt den Themebereich oder die JavaScript-Datei gegen automatische Änderungen.
  • Parameter: erscheint im dynamischen Modus, wenn der Bereich Parameter besitzt.
  • CSS-Bereich: erscheint im statischen Modus und bietet ein Textfeld für CSS-Code.
  • Dateien & Versionen: erscheint bei dateibasierten Bereichen und bei JavaScript-Dateien.
Dynamische Bereiche werden über Parameter gesteuert. Statische Bereiche verwenden direkt gepflegten CSS-Code.

Parameter eines Bereichs

Der Block Parameter zeigt die Felder des gewählten Themebereichs in einer Tabelle.

  • Parameter speichern: übernimmt die geänderten Werte des Bereichs.
  • Parameter hinzufügen: erscheint nur in Entwicklerumgebungen und öffnet ein Modal für neue Parameter.
  • Parameter bearbeiten: erscheint nur in Entwicklerumgebungen und öffnet Name, Label, Typ und Beschreibung eines Parameters.
  • Parameter löschen: erscheint nur in Entwicklerumgebungen und entfernt den Parameter nach Bestätigung.

Der konkrete Feldtyp wird vom Parameter vorgegeben. Typische Parameter sind Texte, Farben, Auswahlfelder, Bildwerte, Zahlen oder Schalter.

CSS-Bereich

Im statischen CSS-Modus zeigt der Block CSS-Bereich ein Textfeld mit dem CSS-Code des gewählten Themebereichs.

  • css_code: Textbereich für den CSS-Code dieses Bereichs.
  • CSS speichern: speichert den Code und aktualisiert das Theme.

Direkter CSS-Code sollte gezielt und nachvollziehbar eingesetzt werden. Wenn eine Anpassung über Parameter möglich ist, ist der Parameterweg meist wartbarer.

Dateien und Versionen

Dateibasierte Themebereiche und JavaScript-Dateien besitzen Versionen. Eine Version ist aktiv, weitere Versionen können geöffnet, verglichen oder bearbeitet werden.

  • Aktiv: Radiobutton für die aktive Version. Beim Wechsel wird die Version gespeichert und das Theme aktualisiert.
  • Version: Versionsbezeichnung der Datei.
  • Beschreibung: interne Beschreibung der Version.
  • Optionen: öffnet eine Version, vergleicht sie mit der aktiven Version oder kopiert sie in Entwicklerumgebungen.
  • Code: Textbereich für HTML- oder JavaScript-Code der geöffneten Version.
  • Syntax-Vorschau: zeigt den Code parallel formatiert an.
  • Änderungsnotiz: dokumentiert, was geändert wurde und warum.
Änderungen an HTML- oder JavaScript-Versionen können einzelne Frontendbereiche sofort beeinflussen. Vor dem Speichern sollte klar sein, welche aktive Version bearbeitet wird.

Eigenes CSS und Bild-Manager

  • Eigenes CSS: speichert zusätzlichen CSS-Code am Theme. Dieser Code eignet sich für kleinere Anpassungen, die nicht über Parameter abgebildet werden.
  • Bild-Manager: lädt neue Themebilder hoch und zeigt vorhandene Bilder mit Löschaktion an.
  • neues Bild hochladen: Datei-Upload für ein Themebild. Das Feld ist für KI-Bildunterstützung vorbereitet.
  • Aktion löschen: entfernt ein vorhandenes Bild aus der Bildliste.

Nach Bild- oder CSS-Änderungen sollte die betroffene Frontendstelle in der Vorschau geprüft werden.

Sichere Vorgehensweise

  1. Aktives Theme und betroffenen Shop prüfen.
  2. Für größere Änderungen zuerst eine Theme-Kopie erstellen.
  3. Stammdaten und Vorschaubild der Kopie eindeutig pflegen.
  4. Designänderungen zuerst über Parameter vornehmen.
  5. CSS, HTML und JavaScript nur gezielt bearbeiten und mit Änderungsnotiz dokumentieren.
  6. Vorschau für Startseite, Produktlisten, Produktdetails, Contentseiten, Warenkorb und Checkout prüfen.
  7. Bei alten Frontend-Ausgaben anschließend die Cache-Einstellungen prüfen oder den Cache leeren.

War diese Seite hilfreich?

Hilf uns, das Handbuch weiter zu verbessern. Wenn etwas fehlt oder unverständlich ist, kannst Du direkt einen kurzen Kommentar senden.