Eigenes Stylesheet (Custom CSS)

Mit der Funktion „Eigenes Stylesheet“ kannst du sowohl für deinen Webshop als auch für dein Admin-Panel dein eigenes CSS hinzufügen. Dies eignet sich ideal für Designanpassungen wie das Ändern von Farben, Schriftarten und Rändern oder das Ausblenden von Elementen, ohne dass du Änderungen an den Theme-Dateien vornehmen musst. Die beiden Bereiche werden separat verwaltet: Das CSS des Webshops findest du unter „Design“ → „Stylesheet“, das des Admin-Panels unter „Konto“ → „Unternehmen“ → „Admin-Darstellung“.

So fügst du CSS hinzu

1. Gehe im Menü zu „Design“
2. Klicken Sie auf „Stylesheet“
3. Geben Sie Ihren CSS-Code in das Textfeld ein
4. Klicken Sie auf „Speichern“

Dein CSS wird nach den themeneigenen Stylesheets geladen, sodass deine Regeln die Standardstile überschreiben. Es gilt für den gesamten Webshop, nicht nur für die Startseite. Wenn du das Admin-Panel selbst gestalten möchtest, erfolgt dies an anderer Stelle, wie weiter unten unter „Admin-Anpassungen“ beschrieben.

Stylesheet-Varianten: mehrere CSS-Versionen für dasselbe Theme

Das Feld mit deinem CSS ist dein Haupt-Stylesheet. Direkt darunter befindet sich der Abschnitt „Stylesheet-Varianten“, in dem du alternative Versionen desselben CSS speichern kannst. Eine Variante ist eine vollständige CSS-Version mit eigenem Namen, eigener Sichtbarkeit und eigenem Zeitplan. Du kannst so viele Varianten haben, wie du möchtest, es wird jedoch immer nur eine gleichzeitig angezeigt.

Solange keine Variante aktiv ist, verwendet der Shop das Haupt-Stylesheet. Wird eine Variante aktiviert, übernimmt sie die Steuerung, und wenn sie wieder deaktiviert wird, kehrt das Haupt-Stylesheet genau wie zuvor zurück.

So erstellst du eine Variante

Es gibt zwei Möglichkeiten, die jeweils für unterschiedliche Zwecke genutzt werden:

• „Variante davon erstellen“ (die Schaltfläche neben „Speichern“): Speichert dein Haupt-Stylesheet und kopiert den Inhalt des Feldes in eine neue Variante, die sofort geöffnet wird. Verwende diese Option, wenn du auf dem bereits vorhandenen Design aufbauen möchtest.
• „Neue Variante“ (Schaltfläche im Abschnitt „Stylesheet-Varianten“): Hier fängst du ganz von vorne an. Du gibst der Variante einen Namen und kannst sofort CSS einfügen oder das Feld leer lassen und es später ausfüllen.

Unabhängig davon, für welche Vorgehensweise du dich entscheidest, wird die Variante offline erstellt. Sie wirkt sich erst dann auf den Shop aus, wenn du sie selbst aktivierst oder ihr einen Datumsbereich zuweist.

Die Felder einer Variante

Klicke auf „Speichern“, wenn du auf der Seite bleiben möchtest, oder auf „Speichern und schließen“, wenn du zur Übersicht zurückkehren möchtest. Mit „Variante löschen“ wird die Variante vollständig entfernt.

Wann ist eine Variante besser als eine einfache Anpassung im CSS?

• Kampagnen, die sich automatisch deaktivieren. Lege dein Black-Friday-Styling in einer Variante mit Start- und Enddatum an. So schaltet es sich von selbst ein und aus, und niemand muss daran denken, am Montagmorgen aufzuräumen.
• Jahreszeiten und Feiertage. Speichere das Weihnachts-, Oster- und Schlussverkaufs-Styling jeweils als eigene Variante und verwende sie Jahr für Jahr wieder, anstatt sie jedes Mal neu zu erstellen.
• Risikofreies Experimentieren. Probiere eine größere Überarbeitung in einer Variante aus. Wenn es nicht wie erhofft läuft, deaktivierst du die Variante einfach wieder.
• Schnelles Rückgängigmachen. Ein Klick schaltet die Variante offline, und der Shop fällt zurück auf das Haupt-Stylesheet, das völlig unberührt bleibt. Du musst nicht erst herausfinden, was du geändert hast.
• A/B-Test. Vergleiche zwei Designs anhand echter Besucher, anstatt zu raten, welches sich besser verkauft.

Die Statusangaben in der Variantenliste

Die Status-Spalte zeigt auf einen Blick, was mit jeder Variante geschieht:

Die Aktionen ganz rechts

Ein Klon erhält den Zusatz „(Kopie)“ im Namen, wird immer offline erstellt und erhält eine Priorität, die eine Stufe unter der des Originals liegt. Somit bleibt das Original weiterhin erfolgreich, bis du selbst etwas anderes entscheidest, und der Klon ist ein sicherer Ort, um etwas Neues auszuprobieren. Das macht ihn gleichzeitig zum idealen Ausgangspunkt für einen Split-Test.

Das Löschen kann nicht rückgängig gemacht werden. Die Variante wird gleichzeitig aus den Split-Tests entfernt, an denen sie beteiligt war.

So wählt das System aus, welche Variante angezeigt wird

Bei jeder Seitenaufruf ermittelt der Shop selbst das zu verwendende Stylesheet. Die Reihenfolge ist immer dieselbe:

1. Zunächst werden alle derzeit aktiven Varianten zusammengestellt, also diejenigen, die entweder online geschaltet sind oder sich innerhalb ihres Datumsintervalls befinden.
2. Läuft ein Split-Test, der mindestens zwei davon abdeckt, werden die Besucher auf die Varianten verteilt.
3. Andernfalls gewinnt die Variante mit der höchsten Priorität.
4. Haben mehrere die gleiche Priorität, gewinnt die neueste davon.
5. Sind keine Varianten aktiv, wird das Haupt-Stylesheet verwendet.

Das Feld „Online“ und die Datumsangaben hängen zusammen

Die Kombination aus dem Feld „Online“ und den beiden Datumsfeldern bestimmt, wann eine Variante live ist:

Priorität

Die Priorität kommt nur zum Einsatz, wenn mehrere Varianten gleichzeitig aktiv sind. Der höchste Wert hat Vorrang. Der Standardwert ist 0, und du kannst gerne negative Werte verwenden. Sind zwei Varianten mit derselben Priorität aktiv, hat die neuere Vorrang, also die, die du zuletzt erstellt hast.

Varianten gelten nur für den Webshop

• Varianten ändern nur das, was deine Kunden sehen. Das Admin-Panel bleibt davon unberührt.
• Das Feld oben auf der Stylesheet-Seite zeigt immer das Haupt-Stylesheet an, auch wenn eine Variante aktiv ist. Du kannst daher nicht versehentlich eine Variante bearbeiten, wenn du die Seite öffnest.
• Wenn du das Admin-Panel selbst gestalten möchtest, findest du die entsprechenden Einstellungen unter „Konto“ → „Unternehmen“ → „Admin-Design“. Das CSS gibt es nur in einer Version, es hat keine Varianten und gilt für alle Nutzer des Kontos.

Warum werden Änderungen nicht immer sofort übernommen?

Dein Shop speichert fertige Seiten in einem Cache, damit sie schnell geladen werden. Wenn du eine Variante aktivierst oder deaktivierst, kann es daher bis zu vier Stunden dauern, bis alle Besucher das neue CSS auf den gespeicherten Seiten sehen. Wenn ein Split-Test läuft, wird der Cache währenddessen automatisch deaktiviert, sodass jeder Besucher immer die Variante sieht, der er zugeordnet ist.

Führe einen Split-Test zwischen zwei Stylesheet-Varianten durch

Wenn du zwei Varianten hast, musst du nicht raten, welche am besten funktioniert. Du kannst deine Besucher entscheiden lassen:

1. Erstelle mindestens zwei Varianten und schalte sie beide online.
2. Sobald zwei Varianten gleichzeitig aktiv sind, erscheint unter der Variantenliste die Verknüpfung „Split-Test deiner Stylesheet-Varianten erstellen “. Du kannst auch direkt zu „Design → Split-Test“ gehen.
3. Gib dem Test einen Namen und erstelle ihn.
4. Füge die Varianten hinzu, die einbezogen werden sollen, verteile den Traffic auf sie und starte den Test.

Ein Stylesheet-Test gilt für den gesamten Shop und nicht nur für eine einzelne Seite. Damit ist er die richtige Wahl, wenn du etwas testen möchtest, das überall vorkommt, wie beispielsweise Schaltflächenfarben, Schriftgrößen oder Abstände um den „Kaufen“-Button herum.

Wenn Sie das Kontrollkästchen „Gewinner als neuen Standard verwenden, sobald der Test endet“ aktivieren, kümmert sich Shoporama um den Rest: Der Gewinner wird online geschaltet und erhält eine höhere Priorität als die anderen, während die unterlegenen Varianten deaktiviert werden. Sie können dies anschließend jederzeit manuell über die Variantenliste ändern.

Der gesamte Ablauf, die Statistik und die Ermittlung des Gewinners werden in „So erstellen und führen Sie einen Split-Test in Shoporama durch“ beschrieben. Wenn Sie zunächst das Konzept dahinter verstehen möchten, können Sie mehr über Split-Tests als Funktion lesen.

Anpassungen am Webshop

Hier sind Beispiele für typische Anpassungen des Webshops:

Hintergrundfarbe der Kopfzeile ändern:

header {
    background-color: #1a1a2e;
}

Schriftart ändern:

body {
    font-family: 'Georgia', serif;
}

Ein Element ausblenden:

.element-class {
    display: none;
}

Admin-Anpassungen

Du kannst das Erscheinungsbild des Admin-Panels auch mit deinem eigenen CSS anpassen. Dieses wird jedoch an einer anderen Stelle als im Stylesheet des Shops eingegeben, nämlich unter „Konto“ → „Unternehmen“ → „Admin-Darstellung“, und gilt für alle Benutzer des Kontos. Nachfolgend findest du eine vollständige Übersicht über die CSS-Klassen und IDs, die du verwenden kannst.

Die Bestellliste – CSS-Klassen für Bestellzeilen

Jede Bestellzeile in der Bestellliste verfügt über eine Reihe dynamischer CSS-Klassen, mit denen du Bestellungen je nach Status, Zahlungsart und Versandart gestalten kannst.

Zahlungsstatus

Beispiel – Roter Hintergrund bei unbezahlten Bestellungen:

.unpaid {
    background-color: #ffe0e0 !important;
}

Bestellstatus

Der Status der Bestellzeile wird direkt als Klasse hinzugefügt:

Beispiel – Grüner Hintergrund bei versendeten und bezahlten Bestellungen:

.paid.sent {
    background-color: #ddffeb !important;
}

Beispiel – Abgedunkelte Darstellung stornierter Bestellungen:

.cancelled {
    background-color: #eee !important;
    opacity: 0.7;
}

Versandart

Der Name der Versandart wird automatisch in eine CSS-Klasse umgewandelt. Alle Buchstaben werden in Kleinbuchstaben umgewandelt und Sonderzeichen durch Unterstriche ersetzt. Beispielsweise wird aus „Heimatadresse mit GLS“ die Klasse .heimatadresse_mit_gls.

Beispiel – Bestellungen nach Versandart farblich kennzeichnen:

/* GLS-Bestellungen mit orangefarbenem Hintergrund */
.hjemmeadresse_med_gls {
    background-color: #fff3e0 !important;
}

/* PostNord-Bestellungen mit blauem Hintergrund */
.postdanmark_til_privatadresse {
    background-color: #e3f2fd !important;
}

Zahlungsgateway

Jede Bestellzeile erhält eine Klasse, die auf der ID des Zahlungsgateways im Format .payment-{ID} basiert. Du findest die ID, indem du zu „Integrationen“ → „Zahlungsgateways“ gehst und dir die URL ansiehst, wenn du auf „Bearbeiten“ klickst.

Beispiel – Grüner Hintergrund für Bestellungen, die über ein bestimmtes Zahlungsgateway bezahlt wurden:

/* Ersetze 12 durch die ID deines Gateways */
.payment-12 {
    background-color: #c8e6c9 !important;
}

Weitere Klassen für Bestellreihen

Beispiel – EAN-Bestellungen hervorheben:

.ean {
    background-color: #c2caff !important;
}

Bestelldetails – Klassen in der erweiterten Ansicht

Wenn du eine Bestellung in der Liste aufklappst, werden die Bestelldetails mit diesen Klassen angezeigt:

Bestellinhalt

Lagerstatus

Beispiel – Roter Text bei Artikeln, die nicht vorrätig sind:

.itemsnotinstock {
    color: #ff0000 !important;
    font-weight: bold;
}

Schaltflächen in der Bestellliste

Die Schaltflächen in der Bestellliste haben feste IDs, die du stylen kannst:

Primäre Schaltflächen

Versandoptionen

Beispiel – Die Schaltfläche „Drucken“ hervorheben:

#btn-print {
    background-color: green !important;
    color: white !important;
}

Beispiel – Nicht verwendete Versandschaltflächen ausblenden:

#btn-swipbox,
#btn-gls {
    display: none !important;
}

Webshop-spezifisches Styling

Wenn du mehrere Webshops desselben Unternehmens verwaltest, kannst du das Admin-Design für jeden Webshop individuell anpassen. Das Body-Element hat die Klasse „webshop{ID}“, wobei „ID“ die ID-Nummer des jeweiligen Webshops ist.

Beispiel – Unterschiedliche Kopfzeilenfarbe pro Webshop:

/* Webshop mit ID 123: rote Kopfzeile */
body.webshop123 nav.top-app-bar {
    background-color: #ad3c3c !important;
}

/* Webshop mit ID 456: blaue Kopfzeile */
body.webshop456 nav.top-app-bar {
    background-color: #2a50a6 !important;
}

Layout und Navigation

Beispiel – Farbe des linken Menüs ändern:

.drawer-light .drawer-menu .nav-link {
    color: #333 !important;
}

.drawer-light .drawer-menu .nav-link:hover {
    background-color: #f0f0f0 !important;
}

Weitere nützliche Elemente

Beliebte Anwendungsfälle

Farbcodierung der Bestellliste

Eine beliebte Konfiguration ist die Farbcodierung der Bestellliste, damit Sie schnell zwischen bezahlten und unbezahlten Bestellungen sowie verschiedenen Status unterscheiden können:

/* Unbezahlte Bestellungen in Hellrot */
.unpaid {
    background-color: #fff0f0 !important;
}

/* Bezahlte und versandte Bestellungen in Hellgrün */
.paid.sent {
    background-color: #f0fff0 !important;
}

/* Stornierte Bestellungen abgeblendet */
.cancelled {
    background-color: #f5f5f5 !important;
    opacity: 0.6;
}

/* EAN-Bestellungen in Hellblau */
.ean {
    background-color: #f0f4ff !important;
}

Wichtige Aktionsschaltflächen hervorheben

/* Grüne Druck-Schaltfläche */
#btn-print {
    background-color: #28a745 !important;
    color: white !important;
}

/* Orangefarbene GLS-Schaltfläche */
#btn-gls-api {
    background-color: #ff9800 !important;
    color: white !important;
}

Mehr Platz für die Bestellliste schaffen

/* Weniger Abstand an den Seiten = mehr Platz für die Spalten */
.container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

Deutliche Kennzeichnung von Artikeln, die nicht vorrätig sind

.itemsnotinstock {
    color: #ff0000 !important;
    font-weight: bold;
    font-size: 1.1em;
}

So findest du den richtigen CSS-Selektor

So findest du die genaue Klasse oder ID eines Elements:

1. Klicke mit der rechten Maustaste auf das Element in deinem Browser
2. Wähle „Element untersuchen“ (Inspect)
3. Suchen Sie die Klasse des Elements (z. B. class="unpaid sent") oder die ID
4. Verwende die Klasse oder ID als CSS-Selektor in deinem Stylesheet

Größere Designänderungen

„Eigenes Stylesheet“ eignet sich für kleinere Anpassungen. Für größere Designänderungen empfiehlt es sich, die Theme-Dateien selbst per SFTP zu bearbeiten. Lies den Artikel „Mit SFTP anmelden“, um loszulegen.

CSS-Spickzettel

Hier findest du eine kurze Übersicht über die am häufigsten verwendeten CSS-Eigenschaften, damit du sofort loslegen kannst, ohne erst nachschlagen zu müssen.

Farben

Farben können als Namen, Hex-Codes oder RGB angegeben werden:

/* Hex-Code (am häufigsten verwendet) */
color: #ff0000;              /* Roter Text */
background-color: #f0f0f0;  /* Hellgrauer Hintergrund */

/* Farbnamen */
color: red;
background-color: white;

/* RGB mit Transparenz */
background-color: rgba(0, 0, 0, 0.1);  /* Schwarz, zu 10 % sichtbar */

Nützliche Farbcodes:

Schriftart (font-family)

/* Schriftart ändern */
font-family: 'Georgia', serif;
font-family: 'Arial', sans-serif;
font-family: 'Courier New', monospace;

/* Google Fonts (füge den Import oben in dein Stylesheet ein) */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
font-family: 'Open Sans', sans-serif;

Text

font-size: 14px;            /* Schriftgröße */
font-weight: bold;          /* Fettdruck (oder 400, 600, 700) */
font-style: italic;         /* Kursiv */
text-align: center;         /* Zentriert (left, right, center) */
text-decoration: underline; /* Unterstreichung */
text-transform: uppercase;  /* Großbuchstaben (lowercase, capitalize) */
line-height: 1.5;           /* Zeilenabstand */
letter-spacing: 1px;        /* Zeichenabstand */

Hintergrund

background-color: #f0f0f0;
background-image: url('https://example.com/bg.png');
background-size: cover;     /* Den gesamten Bereich ausfüllen */
background-repeat: no-repeat;

Rahmen (border)

border: 1px solid #ccc;           /* Rahmen um das gesamte Element */
border-bottom: 2px solid #333;    /* Nur unterer Rahmen */
border-left: 4px solid #28a745;   /* Grüner linker Rahmen */
border-radius: 8px;               /* Abgerundete Ecken */
border: none;                     /* Rahmen entfernen */

Abstände (margin und padding)

/* Padding = innerer Abstand */
padding: 10px;              /* Alle Seiten */
padding: 10px 20px;         /* Oben/unten, links/rechts */
padding-left: 15px;         /* Nur links */

/* Margin = Außenabstand */
margin: 10px;               /* Alle Seiten */
margin-bottom: 20px;        /* Nur unten */
margin: 0 auto;             /* Ein Element zentrieren */

Anzeigen/Ausblenden

display: none;       /* Vollständig ausblenden (nimmt keinen Platz ein) */
visibility: hidden;  /* Unsichtbar (nimmt weiterhin Platz ein) */
opacity: 0.5;        /* Halbtransparent (0 = unsichtbar, 1 = vollständig) */

Größe

width: 100%;         /* Volle Breite */
max-width: 800px;    /* Maximale Breite */
height: 50px;        /* Feste Höhe */
min-height: 200px;   /* Mindesthöhe */

Schatten

box-shadow: 0 2px 4px rgba(0,0,0,0.1);    /* Sanfter Schatten */
box-shadow: 0 4px 12px rgba(0,0,0,0.15);  /* Stärkerer Schatten */
box-shadow: none;                          /* Schatten entfernen */

Häufig gestellte Fragen

Ich habe eine Variante erstellt, aber der Shop sieht genauso aus wie zuvor. Was habe ich vergessen?

Eine neue Variante wird immer offline erstellt, damit sie nicht versehentlich live geschaltet wird. Gehe auf die Stylesheet-Seite, suche die Variante in der Liste und klicke auf das Ein-/Aus-Symbol rechts neben der Zeile. Wenn in der Spalte „Status“ „Jetzt aktiv“ steht, ist sie live. Wenn du im Shop immer noch das alte Design siehst, warte bitte einen Moment und versuche es erneut, da fertige Seiten bis zu vier Stunden lang im Cache gespeichert werden.

Wird das CSS der Variante über mein normales Stylesheet gelegt?

Nein. Solange die Variante aktiv ist, wird ausschließlich das CSS der Variante verwendet. Das Haupt-Stylesheet wird pausiert, aber nicht gelöscht. Deshalb gibt es die Schaltfläche „Variante davon erstellen“: Sie kopiert dein gesamtes aktuelles Stylesheet in die neue Variante. Wenn du stattdessen mit „Neue Variante“ beginnst und nur eine einzige Regel eingibst, sind alle deine anderen Regeln nicht mehr vorhanden, solange die Variante aktiv ist.

Kann ich mein Weihnachts-Styling so einrichten, dass es sich automatisch deaktiviert?

Ja, und das ist einer der besten Gründe, Varianten zu verwenden. Legen Sie das Weihnachts-CSS in einer Variante ab, stellen Sie „Anzeigen ab“ auf den Tag ein, an dem es online gehen soll, und „Anzeigen bis“ auf den letzten Tag. Beide Tage werden mitgezählt, und der Zeitraum endet um Mitternacht. So schaltet sich die Kampagne von selbst ein und aus, auch wenn das Feld „Online“ nicht aktiviert ist.

Ich habe an einer Variante herumprobiert, und jetzt sieht der Shop falsch aus. Was mache ich?

Klicke auf das Ein- und Aus-Symbol neben der Variante in der Liste, damit sie offline geht. Der Shop wechselt dann zurück zum Haupt-Stylesheet, das nicht geändert wurde, sodass du nicht erst herausfinden musst, was im CSS schiefgelaufen ist. Wenn die Variante mit Datumsangaben versehen ist, müssen diese gleichzeitig gelöscht werden, sonst wird sie innerhalb ihres Zeitraums wieder online geschaltet.

Kann ich Varianten der Farbcodierung in der Bestellliste erstellen?

Nein. Varianten gelten nur für das, was die Kunden im Webshop sehen. Das CSS für den Admin-Bereich selbst, also die Farbcodierung von Bestellungen, Schaltflächen und Menüs, befindet sich unter „Konto“ → „Unternehmen“ → „Admin-Darstellung“ und ist nur in einer Version verfügbar. Dafür gilt sie für alle Benutzer des Kontos, sodass das gesamte Team bei denselben Bestellungen dieselben Farben sieht.

Ich habe mehrere Webshops. Gilt eine Variante für alle?

Nein. Sowohl das Haupt-Stylesheet als auch die Varianten gehören zum jeweiligen Webshop, sodass sie in jedem Shop separat angelegt werden müssen. Wenn mehrere Shops das gleiche Kampagnen-Styling haben sollen, kopierst du das CSS manuell. Dafür kannst du deine Shops im Admin-Bereich unterschiedlich farblich kennzeichnen, was im Abschnitt über shopspezifisches Styling weiter oben beschrieben ist.

Was passiert, wenn ich das CSS-Feld in einer aktiven Variante leer lasse?

Dann läuft der Shop komplett ohne dein eigenes CSS, und es bleibt nur das Design des Themes übrig. Das klingt nach einem Fehler, kann aber bewusst genutzt werden: Wenn du den Verdacht hast, dass eine deiner eigenen Regeln etwas durcheinanderbringt, kannst du kurz eine leere Variante online schalten und prüfen, ob das Problem verschwindet. Auf diese Weise kannst du auch einen Split-Test „mit meinem CSS“ gegen „ohne mein CSS“ durchführen.

Wie viele Varianten können gleichzeitig aktiv sein?

So viele, wie du möchtest, aber es wird immer nur eine gleichzeitig angezeigt. Sind mehrere aktiv, gewinnt die Variante mit der höchsten Priorität, und bei gleicher Priorität gewinnt die neueste. Die Ausnahme bildet ein laufender Split-Test, bei dem die Besucher bewusst auf zwei oder mehr Varianten verteilt werden.

Benötigen Sie Hilfe? Kontaktieren Sie uns unter support@shoporama.dk.