Skip to main content

​
Einführung

Das StylesHub ist ein interaktives Tool im Backend, mit dem du Farben, Rahmen, Schatten und weitere Gestaltungsoptionen deines Shops mit einem Klick anpasst, während dein echter Shop live als Vorschau daneben läuft. Ein Klick auf ein Element in der Vorschau öffnet direkt die passende Einstellung, jede Änderung ist sofort sichtbar. Deine Änderungen sind dabei zunächst nur für dich sichtbar, sodass du in Ruhe experimentieren kannst, bevor du sie über den Speichern-Button für alle Besucher übernimmst.
Nummerierte Übersicht der StylesHub Oberfläche
Als erste Orientierung findest du hier die wichtigsten Bereiche der Oberfläche:
  1. Live-Vorschau: Dein Shop mit den aktuellen Einstellungen in Echtzeit
  2. Home und Modus: Zurück zur Übersicht sowie Umschalter für Hell- und Dunkelmodus
  3. Ansicht: Zoom, Vorschaubreite, Raster, Rückgängig/Wiederholen und Speichern
  4. Seite: Wahl der Seiten-Vorschau, etwa Startseite, Kategorieseite, Produktdetailseite, Warenkorb oder Checkout
  5. Eigene Adresse: Eine beliebige Shop-URL für die Vorschau eingeben, z. B. eine eigene Kontaktseite
  6. Farben & Flächen: Auswahl der Fläche, die du bearbeiten möchtest, etwa Seite, Karten, Topbar, Header, Navigation, Sidebar oder Footer
  7. Bereiche: Auswahl einzelner Komponenten innerhalb einer Fläche, z. B. Header
  8. Editor-Panel: Grundfläche und Rollen der aktuell ausgewählten Fläche, etwa Hintergrund-, Text-, Überschriften-, Akzent- und Rahmenfarben
Ist Theme v2 in deinem Shop noch nicht aktiviert, zeigt dir die Vorschau die neue Gestaltung trotzdem an. Im Shop selbst wirken sich die Einstellungen erst aus, nachdem du Theme v2 in der Companion App aktiviert hast.

​
Anleitung

​
Grundeinstellungen

​
Home und Modus

Oben in der Symbolleiste (2) findest du folgende Symbole: Verlassen und zurück zur Companion App, bei ungespeicherten Änderungen mit Rückfrage Hellmodus aktivieren Dunkelmodus aktivieren Bearbeitungsmodus für die Live-Vorschau So kannst du deine Einstellungen sowohl im Hell- als auch im Dunkelmodus prüfen. Ist der Bearbeitungsmodus aktiviert, kannst du direkt im Frame auf Elemente wie Hintergrund oder Schrift klicken und die zugehörigen Farben anschließend im Editor-Panel bearbeiten. Ist er nicht aktiviert, bewegst du dich im Frame wie gewohnt durch den Shop und kannst normal durchklicken.
Fährst du bei aktiviertem Bearbeitungsmodus mit der Maus über ein Element im Frame, zeigt dir die Vorschau, in welchem Strukturelement es sich befindet (etwa Header oder Navigation) und in welcher Rolle (etwa Text oder Überschrift). Im Editor-Panel siehst du dazu die zugrundeliegenden CSS-Klassenselektoren.
Hover im Bearbeitungsmodus zeigt Strukturelement und CSS-Klassenselektor

​
Ansicht

Auf der rechten Seite der Symbolleiste (3) findest du folgende Symbole: Zoomstufe (50, 75 oder 100 %) Vorschaubreite in Pixel, passt den Frame an die aktuelle Bildschirmgröße an Navigations-Panel ein- und ausklappen Editor-Panel ein- und ausklappen Editor-Panel an den unteren Bildschirmrand verschieben Vorschau neu laden Letzte Änderung rückgängig machen Einstellungen speichern

​
Seite

Oben in der Liste Seite (4) wählst du die Seiten-Vorschau aus, etwa Startseite, Kategorieseite, Produktdetailseite, Warenkorb oder Checkout. Die Einträge sind Direktlinks zu den jeweiligen Seiten.
Warenkorb und Checkout zeigen dabei nicht live die Daten eines Kunden, sondern nur deinen eigenen Warenkorb. Bei der Produktdetailseite wird ein zufälliges Produkt angezeigt.

​
URL-Suche

Über das Eingabefeld für die eigene Adresse (5) lädst du eine beliebige Seite deines Shops in die Vorschau. Du brauchst dabei nicht die komplette Domain einzugeben, es reicht der Pfad, zum Beispiel /kontakt.
Der Shop bleibt dabei nicht stur auf der eingegebenen Adresse: Klickst du im Frame auf einen Link, folgt die Vorschau ganz normal dorthin. Du erkennst das an einem Hinweis wie “Der Shop hat weitergeleitet: angefordert war /agb, zu sehen ist /Mein-Konto.”Die Suche hat außerdem eine gewisse Fehlertoleranz, zum Beispiel bei Groß- und Kleinschreibung: “Der Shop hat weitergeleitet: angefordert war /agb, zu sehen ist /AGB.”

​
Farben & Flächen

In der Liste Farben & Flächen (6) wählst du die Fläche aus, die du bearbeiten möchtest, etwa Seite, Karten, Topbar, Header, Navigation, Sidebar oder Footer. Insgesamt gibt es elf Flächen sowie den übergeordneten Bereich “Global”. Angezeigt werden dabei alle aktuell zum Editieren verfügbaren Flächen. Diese können sich abhängig von der Seiten-Vorschau bzw. der aufgerufenen URL dynamisch ändern.
“Global” zeigt im Editor-Panel alle übergeordneten Optionen gesammelt an. Hier lassen sich übergeordnete Farben, Styles und Details gemeinsam für alle Flächen ändern. Wählst du danach eine der darunterliegenden Kategorien aus, überschreibt deine Einstellung dort die globale Einstellung nur für diese Auswahl.
Klickst du auf ein Element in der Live-Vorschau, springt die Auswahl automatisch auf die zuständige Fläche und zeigt dir die passenden Einstellungen. Jede Änderung ist sofort sichtbar, gespeichert wird aber erst über den Speichern-Button. Fährst du mit der Maus über eine Farbzeile, markiert die Vorschau gestrichelt und orange alle Stellen, an denen diese Farbe wirkt, und zeigt dir zusätzlich die Anzahl der betroffenen Stellen an, damit du sie nicht mit der aktuellen Auswahl verwechselst.
Hover über eine Rolle im Editor-Panel hebt alle betroffenen Stellen in der Vorschau hervor

​
Bereiche

Darunter findest du unter Bereiche (7) einzelne Komponenten innerhalb einer Fläche, zum Beispiel den Header, für die du gezielt Anpassungen vornehmen kannst. Hier lassen sich alle Einstellungen ändern, die du auch im Backend in der Companion App findest, du musst also nicht zwischen StylesHub und Companion App hin und her wechseln.
Kopfzeile, Topbar, Navigation, Footer, Sidebar, Artikelkarten, Produktseite, Warenkorb, Bestellvorgang, Slider und Suchfeld öffnen dabei ihre gewohnte Admin-Ansicht direkt im Editor-Panel. Nach dem Speichern lädt die Live-Vorschau neu, damit du das Ergebnis siehst.

​
Eigenes CSS

Ganz unten in der Bereichsliste findest du außerdem die Option Eigenes CSS. Sie öffnet die custom.css deines aktiven Themes direkt im Editor, im Child-Setup also die custom.css des Childs, nicht die des Eltern-Templates. Welche Datei du gerade bearbeitest, steht dir jederzeit in der Zustandszeile über dem Editor.
Eigenes CSS
Live-Vorschau: Was du im Editor tippst, wirkt sofort im Vorschaufenster daneben, ganz ohne zu speichern, ohne Neuladen und ohne dass dabei etwas zum Server geht. Gespeichert wird über den zentralen Speichern-Knopf der Werkzeugleiste, denselben wie für alle anderen Bereiche im StylesHub. Selektor-Picker: Über Element auswählen aktivierst du den Auswahlmodus. Ein Klick auf ein Element im Vorschaufenster baut daraus dessen Vorfahrenkette als Reihe von Bausteinen: jedes Glied einzeln anklickbar, jede Klasse einzeln abwählbar, um den Selektor gezielt einzugrenzen oder zu erweitern. Daneben zeigt dir die Trefferzahl, wie viele Elemente der aktuelle Selektor gerade trifft, zum Beispiel “1 Treffer” oder “25 Treffer”. Über die Schaltflächen Selektor und Regel fügst du den aufgebauten Selektor bzw. ein fertiges Regelgerüst an der aktuellen Cursorposition im Editor ein. Konfliktschutz: Ändert jemand die Datei per FTP, während der Editor geöffnet ist, wird beim Speichern nichts überschrieben. Du bekommst stattdessen die Wahl zwischen Fremden Stand laden (übernimmt die extern geänderte Version in den Editor) und Trotzdem überschreiben (speichert deine Version und überschreibt die externe Änderung).
Beim Speichern legt der Editor außerdem immer eine Sicherungskopie custom.css.bak an.
Regeln aus der Ansicht Custom CSS liegen weiterhin inline im Seitenkopf und gewinnen bei gleicher Spezifität gegen diese Datei.
Die custom.css ist im Child-Repo versioniert. Ein normaler Pull lässt Änderungen, die du hier vorgenommen hast, unangetastet stehen. Ein harter Reset beim Deployment wirft sie dagegen weg. Ausführliche Informationen dazu findest du in NIUplusChild/docs/custom-css.md.

​
Editor-Panel

​
Global

Wählst du bei Farben & Flächen (6) “Global” aus, zeigt dir das Editor-Panel die Reiter Farben, Styles und Details. Hier änderst du die Einstellungen für alle Flächen gemeinsam übergeordnet. Farben: Grundfarben, Signalfarben und Signal-Hintergründe. Näheres zu den Farben findest du auf der Seite Variablen.
​
color
Hauptfarbe deines Shops, etwa für den Primär-Button.
​
color
Zweite Grundfarbe, etwa für Sekundär-Buttons.
​
color
Dritte Grundfarbe, etwa für Tertiär-Buttons.
​
color
Erste Akzentfarbe für zusätzliche Gestaltungselemente.
​
color
Zweite Akzentfarbe für zusätzliche Gestaltungselemente.
​
color
Farbe für positive Rückmeldungen, etwa erfolgreiche Aktionen.
​
color
Farbe für Warnhinweise.
​
color
Farbe für Fehler- und Gefahrenhinweise.
​
color
Farbe für allgemeine Hinweise.
​
color
Hintergrundfarbe zur Success-Farbe, standardmäßig automatisch abgeleitet.
​
color
Hintergrundfarbe zur Warning-Farbe, standardmäßig automatisch abgeleitet.
​
color
Hintergrundfarbe zur Danger-Farbe, standardmäßig automatisch abgeleitet.
​
color
Hintergrundfarbe zur Info-Farbe, standardmäßig automatisch abgeleitet.
Styles: Theme, Buttons, Eingabefelder, Elemente und Kartenstile.
​
boolean
Schaltet Theme 2.0 mit dem Flächen- und Rollen-System für deinen Shop ein.
​
boolean
Schaltet den Dunkelmodus für deinen Shop frei.
​
select
Legt fest, ob der Shop standardmäßig im Hell- oder Dunkelmodus startet.
​
boolean
Zeigt Besuchern einen Umschalter für Hell- und Dunkelmodus im Frontend an.
​
select
Farbrolle für den Primär-Button, standardmäßig automatisch aus der Primärfarbe abgeleitet.
​
select
Farbrolle für den Sekundär-Button, standardmäßig automatisch aus der Sekundärfarbe abgeleitet.
​
select
Farbrolle für den Tertiär-Button, standardmäßig automatisch aus der Tertiärfarbe abgeleitet.
​
select
Farbrolle für den Warenkorb-Button.
​
select
Farbrolle für den Zur-Kasse-Button.
​
select
Farbrolle für den Quickbuy-Button.
​
select
Farbrolle für Buttons in der Footer-Topbar.
​
select
Farbrolle für den ersten Accent-Button.
​
select
Legt fest, wie Eingabefelder umrandet werden, etwa umrandet oder nur mit Unterstrich.
​
select
Legt fest, ob das Suchfeld dem Stil der Eingabefelder folgt oder eigene Werte nutzt.
​
select
Legt die Breite des Rahmens für Eingabefelder fest.
​
select
Legt fest, ob der Produkttitel in der Textfarbe oder einer anderen Rolle erscheint.
​
select
Legt fest, wie deutlich ausgewählte Elemente hervorgehoben werden, von dezent bis Akzent.
​
select
Legt den globalen Standard-Kartenstil fest, etwa ohne Kartenstil oder mit Schatten.
Details: Radius und Feldschatten.
​
string
Grundwert für Rundungen im Shop. Erlaubt sind 1 bis 4 Werte, je Wert 0 oder eine Zahl mit px, rem oder em, zum Beispiel 8px, 0 oder 10px 5px 0.
​
select
Rundung für Flächen und Karten, folgt standardmäßig dem Basisradius oder nutzt einen eigenen Wert.
​
select
Rundung für Bedienelemente wie Buttons, folgt dem Basisradius oder nutzt einen eigenen Wert.
​
select
Rundung für Eingabefelder, folgt dem Basisradius oder nutzt einen eigenen Wert.
​
select
Rundung für Marker, folgt dem Basisradius oder nutzt einen eigenen Wert.
​
select
Rundung für Medien und Kacheln, folgt dem Basisradius oder nutzt einen eigenen Wert.
​
select
Rundung für den Quickbuy-Button, folgt standardmäßig den Bedienelementen.
​
select
Rundung für die Galerie-Kachel auf der Produktdetailseite, folgt standardmäßig Medien & Kacheln.
​
select
Rundung für die Galerie-Thumbnails, standardmäßig ohne Rundung.
​
number
Horizontaler Versatz des Schattens bei Eingabefeldern.
​
number
Vertikaler Versatz des Schattens bei Eingabefeldern.
​
number
Weichzeichnung des Schattens.
​
number
Ausdehnung des Schattens.
​
select
Legt fest, ob der Schatten außen oder innen liegt.

​
Seite (Grundfläche)

Wählst du bei Farben & Flächen (6) die Fläche “Seite” aus, zeigt dir das Editor-Panel (8) deren Grundfläche und Rollen.
Rollen sind die Farben, die sich innerhalb einer Fläche aus deren Grundfläche ableiten, etwa für Text, Rahmen oder Hover-Zustände. Anstatt jede Farbe einzeln festzulegen, definierst du so für jede Fläche einheitliche Farbrollen, die sich automatisch berechnen lassen oder individuell überschrieben werden können.
Neben Hintergrund und den einzelnen Rollen zeigt dir das Editor-Panel jeweils an, wie oft die Einstellung auf der aktuell angezeigten Seite vorkommt, etwa “1 Stelle”. Wird sie auf dieser Seite gar nicht verwendet, steht dort stattdessen “auf dieser Seite nicht sichtbar”.
​
color
Hintergrundfarbe der ausgewählten Fläche.
​
color
Farbe für Fließtext, standardmäßig automatisch aus dem Hintergrund abgeleitet.
​
color
Farbe für weniger wichtigen Text, etwa Nebeninformationen.
​
color
Farbe für Überschriften.
​
color
Akzentfarbe für hervorgehobene Elemente innerhalb der Fläche.
​
color
Farbe für Rahmen und Trennlinien.
​
color
Hintergrundfarbe beim Überfahren mit der Maus.
​
string
Schattenfarbe der Fläche, als RGBA-Wert.
​
color
Hintergrundfarbe von Eingabefeldern innerhalb der Fläche.
​
color
Textfarbe in Eingabefeldern.
​
color
Rahmenfarbe von Eingabefeldern.
​
color
Farbe des Platzhaltertexts in Eingabefeldern.
​
color
Farbe von Eingabefeldern im fokussierten Zustand.
​
color
Hintergrundfarbe von deaktivierten Eingabefeldern.
Du kannst bei Hintergrund und jeder Rolle jeweils wählen zwischen “Automatisch” (die Farbe wird berechnet), einer der Grundfarben wie Primär-, Sekundär- oder Tertiärfarbe, dem Hintergrund einer anderen Fläche wie “Seiten-Hintergrund”, oder “Eigene Farbe” für einen individuellen Wert. Bei der Fläche “Topbar” steht der Hintergrund zum Beispiel standardmäßig auf “Tertiärfarbe”, bei der Fläche “Header” auf “Seiten-Hintergrund”. Manche Flächen haben zusätzlich eigene Reiter Styles und Details mit fläche-spezifischen Einstellungen.

​
Karten

Die Fläche Karten ist ein Beispiel dafür:
​
select
Legt den Kartenstil für diese Fläche fest.
​
select
Legt den Kartenstil für die Bild-Kachel fest.
​
select
Legt den Effekt beim Überfahren des Artikelbilds fest.
​
select
Kartenstil der Warenkorbübersicht.
​
select
Kartenstil der Box “Weiter zum Checkout”.
​
select
Kartenstil der Gratisgeschenke-Box.
​
select
Kartenstil der Buybox.
​
select
Kartenstil des Productinfo-Nav-Containers.
​
select
Kartenstil der Downloads- und Medien-Box.
​
select
Kartenstil der Box “Zusätzliche Artikel”.
​
select
Kartenstil des Stücklisten- und Bundle-Hinweises.
​
select
Kartenstil der Artikelkarten in Listen und Kategorien.
​
select
Kartenstil der Artikelkarten innerhalb der Sidebar, folgt standardmäßig den Artikelkarten.
​
select
Kartenstil der Unterkategorie-Karten der ersten Ebene am Desktop.
​
select
Kartenstil der Unterkategorie-Karten der ersten Ebene mobil.
​
select
Kartenstil der Unterkategorie-Karten tieferer Ebenen am Desktop.
​
select
Kartenstil der Unterkategorie-Karten tieferer Ebenen mobil.
​
select
Kartenstil der klappbaren Karten im Bestellvorgang, folgt standardmäßig dem globalen Standard.
​
select
Kartenstil der Artikelpositionen im Bestellvorgang, folgt standardmäßig dem globalen Standard.
​
number
Horizontaler Versatz des Kartenschattens im Ruhezustand.
​
number
Vertikaler Versatz des Kartenschattens im Ruhezustand.
​
number
Weichzeichnung des Kartenschattens im Ruhezustand.
​
number
Ausdehnung des Kartenschattens im Ruhezustand.
​
number
Horizontaler Versatz des Kartenschattens beim Überfahren mit der Maus.
​
number
Vertikaler Versatz des Kartenschattens beim Überfahren mit der Maus.
​
number
Weichzeichnung des Kartenschattens beim Überfahren mit der Maus.
​
number
Ausdehnung des Kartenschattens beim Überfahren mit der Maus.
​
string
Innenabstand der Karte.
​
select
Innenabstand von Kacheln innerhalb der Karte, standardmäßig automatisch.
​
select
Rundung von Kacheln innerhalb der Karte, folgt standardmäßig dem Medien- bzw. Karten-Radius.
​
select
Rundung der Karte, folgt standardmäßig der Basis.
Andere Flächen folgen demselben Muster mit Farben (Hintergrund und Rollen) sowie eigenen Styles- und teils Details-Reitern, haben dabei aber unterschiedlich viele fläche-spezifische Einstellungen.

​
Topbar

Im Reiter Farben legst du den Hintergrund sowie die Rollen der Topbar fest, also Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten und die Eingabefeld-Rollen. Zusätzlich hat die Topbar einen eigenen Styles-Reiter mit fläche-spezifischen Kartenstil-Einstellungen. Im Reiter Farben legst du den Hintergrund sowie die Rollen des Headers fest, also Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten und die Eingabefeld-Rollen. Zusätzlich hat der Header einen eigenen Styles-Reiter mit fläche-spezifischen Kartenstil-Einstellungen. Im Reiter Farben legst du den Hintergrund sowie die Rollen der Navigation fest, also Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten und die Eingabefeld-Rollen. Zusätzlich hat die Navigation einen eigenen Styles-Reiter mit fläche-spezifischen Kartenstil-Einstellungen. Im Reiter Farben legst du den Hintergrund sowie die Rollen der Footer Topbar fest, also Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten und die Eingabefeld-Rollen. Zusätzlich hat die Footer Topbar einen eigenen Styles-Reiter mit fläche-spezifischen Kartenstil-Einstellungen. Im Reiter Farben legst du den Hintergrund sowie die Rollen des Footer Hauptbereichs fest, also Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten und die Eingabefeld-Rollen. Zusätzlich hat der Footer Hauptbereich einen eigenen Styles-Reiter mit fläche-spezifischen Kartenstil-Einstellungen.

​
Checkout-Bestellübersicht

Die Fläche Checkout-Bestellübersicht hat keinen eigenen Details-Reiter, dafür einen schlankeren Styles-Reiter:
​
select
Kartenstil der klappbaren Karten im Bestellvorgang, folgt standardmäßig dem globalen Standard.
​
select
Kartenstil der Artikelpositionen im Bestellvorgang, folgt standardmäßig dem globalen Standard.
Die Fläche Sidebar hat im Reiter Farben den generischen Hintergrund und die Rollen. Im Styles-Reiter findest du eine einzelne fläche-spezifische Einstellung:
​
select
Kartenstil der Artikelkarten innerhalb der Sidebar, standardmäßig “Wie Artikelkarten (Standard)”.

​
Overlay (Modal, Dropdown, Toast)

Die Fläche Overlay bündelt die Gestaltung von Modals, Dropdowns und Toasts. Sie hat ebenfalls den generischen Reiter Farben mit Hintergrund und Rollen, aber keinen eigenen Styles-Reiter. Stattdessen gibt es einen Details-Reiter:
​
select
Rundung von Modals, Dropdowns und Toasts, standardmäßig mit eigenem Wert.
Das Editor-Panel passt sich dem Inhalt an: schmal bei Farbzeilen, über die volle Breite bei Formularen, wahlweise rechts oder unten angedockt (siehe Icon ). Breite und Höhe lassen sich ziehen und werden gemerkt.