Admin-Design: Gestalte dein Admin-Panel individuell

Die Verwaltung von Shoporama sieht grundsätzlich für alle gleich aus. Sie können jedoch selbst festlegen, wie sie aussehen soll, wenn Sie Ihre eigenen Farben, Ihr eigenes Logo oben oder einfach nur eine deutlichere Kennzeichnung der Bestellungen wünschen, auf die Sie schnell reagieren müssen. Dies können Sie unter „Admin-Darstellung“ einrichten.

In der Praxis handelt es sich um ein Textfeld, in das du ein paar Zeilen eingibst, und schon sieht die Verwaltung für alle Nutzer des Kontos anders aus.

So findest du „Admin-Design“

Öffne das Menü auf der linken Seite, scrolle nach unten zum Abschnitt „Konto“, klicke auf „Unternehmen“ und wähle „Admin-Design“ aus.

Die Seite besteht aus einem Feld namens „Custom CSS“. Dort steht: „Hier kannst du das Erscheinungsbild deiner Admin-Seite mit CSS anpassen. Die Änderungen gelten für alle Benutzer deines Kontos.“ Darunter befindet sich ein großes Textfeld und ganz unten eine Schaltfläche „Speichern“.

1. Gib dein CSS in das Textfeld ein oder füge es ein.
2. Klicken Sie auf „Speichern“ oder drücken Sie Cmd+S auf dem Mac und Strg+S unter Windows.
3. Die Seite wird neu geladen, und du siehst das Ergebnis sofort im gesamten Admin-Bereich.

Wenn du alles rückgängig machen möchtest, leere das Feld und klicke auf „Speichern“. Dann wird das Standarddesign wiederhergestellt. Dabei geht nichts kaputt.

Was ist CSS und was kann es?

CSS ist die Sprache, die steuert, wie eine Seite aussieht: Farben, Schriftgrößen, Abstände und ob ein Element überhaupt angezeigt wird. Du wählst das Element aus, das du ändern möchtest, und gibst dann ein, was geschehen soll:

.top-app-bar {
  background: #14532d !important;
}

Die Regel besagt: „Alles mit dem Namen top-app-bar soll einen dunkelgrünen Hintergrund haben“, und top-app-bar ist genau die Leiste ganz oben im Administrationsbereich. !important bedeutet „dies hat Vorrang vor den Vorgaben von Shoporama selbst“, und das wirst du in der Regel auch brauchen. Du kannst Farben ändern, Schriftarten und Schriftgrößen anpassen, Zahlen deutlicher darstellen, Elemente verschieben und nicht benötigte Elemente ausblenden. Du kannst jedoch keine neuen Funktionen hinzufügen oder JavaScript einfügen. Das Feld verändert nur das Aussehen des Administrationsbereichs, niemals dessen Funktionalität.

Für wen und was gelten die Änderungen?

• Alle Benutzer des Kontos. Es handelt sich nicht um eine persönliche Einstellung. Ihre Kollegen sehen die Änderung, sobald sie das nächste Mal eine Seite laden.
• Alle Webshops desselben Unternehmens. Weiter unten erfährst du, wie du einen einzelnen Shop gezielt anpassen kannst.
• Nur den Administrationsbereich, nicht deinen Shop. Deine Kunden sehen davon nichts. Wenn das Erscheinungsbild des Shops geändert werden soll, erfolgt dies im Theme unter „Design“.
• Nur wenn man angemeldet ist. Die Anmeldeseite ist davon nicht betroffen.
• Alle dem Unternehmen zugeordneten Benutzer können das Feld bearbeiten. Es gibt keine gesonderte Berechtigung dafür, also vereinbaren Sie intern, wer daran Änderungen vornimmt.

Drei Beispiele, die du direkt kopieren kannst

1. Verleihe der oberen Leiste deine eigene Farbe

Die einfachste und auffälligste Änderung. Ersetze den Farbcode durch deinen eigenen:

.top-app-bar {
  background: #14532d !important;
}

2. Bestellungen mit einer bestimmten Versandart farblich kennzeichnen

Jede Bestellzeile in der Bestellübersicht erhält automatisch eine Reihe von Bezeichnungen, die die Bestellung beschreiben. Eine davon ist der Name der Versandart in Kleinbuchstaben, wobei alle Zeichen außer den Buchstaben a bis z durch Unterstriche ersetzt werden. „Abholung“ wird zu „abholung“ und „Post Nord“ wird zu „post_nord“. Sollen Abholbestellungen gelb sein, damit das Paketdienstunternehmen sie erkennt:

tr.abholung {
  background: #fff3cd !important;
}

Wenn du dir bezüglich des genauen Namens unsicher bist, kannst du mit der rechten Maustaste auf die Bestellzeile klicken und „Untersuchen“ oder „Quelltext anzeigen“ auswählen. Eine Schritt-für-Schritt-Anleitung findest du unter „Hintergrundfarbe von Bestellungen mit bestimmter Lieferart ändern“.

3. Vergrößern Sie die Bestellnummer

Wenn du das Smartphone in einer Hand hältst und eine Bestellnummer in einer langen Liste suchen musst:

.shoporama-order-id-link {
  font-size: 16px;
  font-weight: 700;
}

Füge dein eigenes Logo oben ein

Wenn du eine Agentur bist, die den Shop für einen Kunden verwaltet, oder einfach nur dein eigenes Logo sehen möchtest, kannst du das Shoporama-Logo oben links austauschen. Das Logo muss sich unter einer Adresse befinden, die über https abgerufen werden kann, und die Adresse muss ohne Anführungszeichen angegeben werden:

.navbar-brand img {
  content: url(https://dit-domaene.dk/logo.svg);
  width: 160px;
}

Wenn du das Logo lieber einfach ausblenden möchtest, reicht „display: none“ aus.

Den Dunkelmodus nicht vergessen

Die Verwaltung ist sowohl in einer hellen als auch in einer dunklen Version verfügbar. Der Dunkelmodus ist eine persönliche Einstellung, die jeder Nutzer selbst aktiviert; du kannst also nicht davon ausgehen, dass deine Kollegen dieselbe Version wie du verwenden. Dein CSS muss in beiden Modi funktionieren.

Die Tücken liegen in den hellen Farben. Ein pastellfarbener Hintergrund, der im hellen Modus gut aussieht, wird im dunklen Modus zu einem grellen Fleck mit unlesbarem Text. Die Lösung besteht darin, die Regel zweimal zu schreiben und „body.dark-mode“ vor die letzte zu setzen:

tr.Abholung {
  background: #fff3cd !important;
}

body.dark-mode tr.Abholung {
  background: #3a3320 !important;
}

Und teste es: Schalte den Dunkelmodus in deinem eigenen Benutzerkonto ein, schau dir die Seite an und schalte ihn wieder aus.

Mehrere Shops? Weisen Sie jedem Shop eine eigene Farbe zu

Der klassische Fehler beim Betreiben mehrerer Webshops über dasselbe Konto ist, einen Preis zu korrigieren oder eine Bestellung im falschen Shop zu versenden. Eine farbige Kopfzeile pro Shop beseitigt dieses Problem. Jeder Shop hat eine eigene Nummer, die in der Adressleiste des Browsers angezeigt wird. Steht dort /admin/da/7/, befindest du dich im Shop Nummer 7 und kannst diesen mit „body.webshop7“ vor der Regel gezielt ansprechen:

body.webshop1 .top-app-bar {
  background: #14532d !important;
}

body.webshop7 .top-app-bar {
  background: #7c2d12 !important;
}

Es gibt keine kostengünstigere Absicherung dagegen, im falschen Shop Änderungen vorzunehmen. Mehr dazu findest du unter „Wie richte ich einen weiteren Webshop ein?“.

Wann lohnt sich die Investition?

• Agenturen und Webentwickler: Fügen Sie Ihr eigenes Logo und Ihre Farben ein, damit der Kunde beim Einloggen auf Ihre Marke trifft.
• Mehrere Shops in einem Konto. Weisen Sie jedem Shop eine eigene Farbe zu, damit niemand an der falschen Stelle Änderungen vornimmt.
• Verpackung und Lager. Markieren Sie Bestellungen, die anders bearbeitet werden müssen, zum Beispiel bei Abholung im Laden. Weniger Verpackungsfehler bedeuten Geldersparnis.
• Einarbeitung. Blenden Sie die Menüpunkte aus, die ein neuer Mitarbeiter in den ersten Wochen nicht benötigt.
• Barrierefreiheit. Vergrößere die Schriftgröße an einer Stelle für alle, wenn die Zahlen schwer zu lesen sind.

Gut zu wissen, bevor Sie loslegen

• Es handelt sich um kosmetische Anpassungen, nicht um Zugriffsrechte. Wenn Sie einen Menüpunkt ausblenden, ist die Funktion weiterhin vorhanden und kann weiterhin aufgerufen werden. Soll einem Mitarbeiter der Zugriff tatsächlich entzogen werden, wird dies auf Benutzerebene geregelt. Siehe „So richten Sie mehrere Benutzer in Ihrem Shop ein“.
• Das Feld akzeptiert nur CSS. Kein JavaScript, keine Tracking-Codes und kein HTML. Wenn Code in den Shop eingefügt werden soll, verwenden Sie die Funktion „Code in Head und Body einfügen“ in Ihrem Shoporama-Shop.
• Einige Zeichen können nicht verwendet werden. Anführungszeichen, Apostroph, das „Größer-als“-Zeichen und das „und“-Zeichen funktionieren in diesem Feld nicht. Siehe den technischen Abschnitt weiter unten.
• Die Bezeichnungen können sich ändern. Wir entwickeln den Administrationsbereich kontinuierlich weiter, sodass eine Regel nach einem Update möglicherweise nicht mehr funktioniert. In diesem Fall verliert die Änderung lediglich ihre Wirkung.
• Siehst du die Änderung nicht? Führe einen harten Neuladevorgang mit Cmd+Shift+R oder Strg+F5 durch.
• Speichere eine Kopie deines CSS in einem Dokument, damit du es jederzeit wieder einfügen kannst.

Für technisch Versierte

Der Inhalt des Feldes wird in ein „style“-Element im Kopfbereich aller Verwaltungsseiten für angemeldete Benutzer des Unternehmens eingefügt, entsprechend den plattformeigenen Stylesheets. Du profitierst also von der Reihenfolge, aber sowohl Utility-Klassen als auch der Dunkelmodus verwenden an mehreren Stellen „!important“, also rechne damit, dass du es selbst verwenden musst.

Zeichen, die du nicht verwenden kannst

Der Inhalt wird HTML-escaped, und da ein `style`-Element HTML-Entitäten nicht dekodiert, bleiben Anführungszeichen, Apostroph, >, < und & erhalten. In der Praxis bedeutet das:

• Verwende Nachkommen-Selektoren, also .card .card-header, anstelle des Kind-Selektors.
• Schreibe url(https://...) ohne Anführungszeichen.
• Vermeide „content“ mit Textwerten, da diese Anführungszeichen erfordern. Bilder über „url()“ funktionieren einwandfrei.
• Verwende in Media-Abfragen „max-width“ und „min-width“, nicht die neuere „range“-Syntax.
• CSS-Verschachtelung mit dem „-“-Zeichen funktioniert nicht. Schreibe die Selektoren vollständig aus.

Dagegen funktionieren @media, calc(), CSS-Variablen, Pseudoklassen und Attributselektoren mit Werten ohne Anführungszeichen.

Ankerpunkte, an denen du dein CSS aufhängen kannst

Für das `body`-Element stehen unter anderem „webshop<Nummer> “ (die Nummer des Shops aus der Adresse), „dark-mode“ und „layout-topmenu“ zur Verfügung. Jede Bestellzeile in der Bestellübersicht enthält unter anderem:

• „paid “ oder „unpaid“.
• Den Status der Bestellung, zum Beispiel „new“, „process“, „sent“, „pending“, „ready“, „cancelled“, „ready_for_pickup“ oder „picked_up“.
• Den Namen der Versandart in Kleinbuchstaben, wobei alles außer den Buchstaben a bis z durch Unterstriche ersetzt wird. Zahlen, Leerzeichen sowie æ, ø und å werden also ebenfalls zu Unterstrichen.
• „ean“ bei Bestellungen mit EAN-Nummer, „credit_note“ bei Gutschriften und „has_pickup_address“ oder „no_pickup_address“, je nachdem, ob die Bestellung an eine Paketstation geliefert werden soll.

Die ältere Anleitung unter „Eigenes Stylesheet (Custom CSS) “ enthält im Menü einige weitere Beispiele für Selektoren.

Häufig gestellte Fragen

Ich kann nicht programmieren. Kann ich es trotzdem nutzen?

Ja. Kopiere die obigen Beispiele in das Feld und passe nur den Farbcode an. Wenn etwas schiefgeht, leere das Feld und klicke auf „Speichern“ – dann ist alles wieder wie zuvor. Wenn du etwas Fortgeschritteneres möchtest, kann dein Webentwickler das in wenigen Minuten erledigen, oder du schreibst an support@shoporama.dk.

Ändert sich dadurch etwas für meine Kunden im Online-Shop selbst?

Nein. Das Feld betrifft ausschließlich den Administrationsbereich, also das, was du selbst siehst, wenn du eingeloggt bist. Deine Kunden merken nichts davon. Wenn sich das Erscheinungsbild des Shops ändern soll, nimmst du die Änderungen im Theme unter „Design“ vor.

Gilt mein CSS auch für meine Kollegen?

Ja, und das steht auch auf der Seite: Die Änderungen gelten für alle Nutzer des Kontos in allen Webshops, die unter demselben Unternehmen geführt werden. Informiere daher bitte deine Kollegen, bevor du etwas Wesentliches änderst.

Wie mache ich die Änderungen rückgängig, wenn die Verwaltung seltsam aussieht?

Gehe zu „Konto“, „Unternehmen“, „Admin-Darstellung“, markiere alles im Feld, lösche den Inhalt und klicke auf „Speichern“. Damit ist die Standarddarstellung wiederhergestellt. Wenn du immer noch die alte Darstellung siehst, führe einen harten Neuladevorgang mit Cmd+Shift+R oder Strg+F5 durch.

Kann ich für meine verschiedenen Shops unterschiedliche Farben verwenden?

Ja. Gib „body.webshop“ gefolgt von der Shop-Nummer vor der Zeile ein. Die Nummer steht in der Browser-Adresse direkt hinter dem Sprachcode. So hat jeder Shop seine eigene Farbe, und es wird schwieriger, versehentlich im falschen Shop Änderungen vorzunehmen.

Funktioniert das im Dunkelmodus?

Dein CSS wird in beiden Modi geladen, wird aber nicht automatisch angepasst. Eine helle Hintergrundfarbe bleibt auch für einen Kollegen im Dunkelmodus hell. Füge daher eine zusätzliche Regel mit „body.dark-mode“ am Anfang hinzu und teste die Seite in beiden Modi.

Warum funktioniert meine Regel nicht?

Die drei häufigsten Ursachen: Es fehlt „!important“, sodass das platformeigene Styling Vorrang hat, der Selektor ist falsch geschrieben oder die Regel enthält Anführungszeichen oder ein „>“-Zeichen, die in diesem Feld nicht verwendet werden dürfen. Überprüfe außerdem, ob die Seite vollständig neu geladen wurde.

Kann ich hier JavaScript oder ein Tracking-Skript einfügen?

Nein. Der Inhalt wird als reines CSS eingefügt, und Zeichen wie „kleiner als“ und „größer als“ werden dabei umcodiert, sodass ein Script-Tag niemals ausgeführt werden kann. Soll ein Skript in den Shop selbst eingebunden werden, gibt es dafür einen separaten Bereich, der im Artikel zum Einfügen von Code in den Head- und Body-Bereich beschrieben wird.

Kann ich Menüpunkte ausblenden, damit neue Mitarbeiter nicht in Preisen und Einstellungen herumspielen?

Sie können sie optisch ausblenden, was den Arbeitsalltag vereinfacht. Dies ist jedoch keine Sperre: Die Funktion ist weiterhin vorhanden und kann weiterhin aufgerufen werden. Soll ein Benutzer tatsächlich keinen Zugriff haben, wird dies auf der Benutzerseite unter „Konto“, „Unternehmen“, „Benutzer“ geregelt.

Kann ich das Shoporama-Logo durch mein eigenes ersetzen?

Ja. Du klickst auf das Logo-Bild oben und ersetzt es durch den Pfad zu deinem eigenen Logo. Das Logo muss über https abrufbar sein, und der Pfad wird ohne Anführungszeichen eingegeben. Das ist besonders für Agenturen sinnvoll, die dem Kunden ihre eigene Marke präsentieren möchten.

Wenn du Hilfe bei einer bestimmten Änderung benötigst, kannst du dich gerne an support@shoporama.dk wenden. Teile uns bitte genau mit, was anders aussehen soll, und füge einen Screenshot bei.