Allgemein
In diesem Bereich passt du die Basisfarben deines Shops an, z. B. Firmenfarben, Textfarben und weitere Grundwerte. Ab Snackys 5.6.0 werden diese Farbeinstellungen automatisch in die nachfolgenden Detailbereiche vererbt. Dort kannst du sie bei Bedarf weiter verfeinern.
CSS-Variablen nutzen
Neben jeder Farbe findest du die passende CSS-Variable. Du kannst diese Variable kopieren und in anderen Farbeinstellungen wiederverwenden. So kannst du z. B. deine Firmenfarbe auch für die Preisfarbe übernehmen, indem du dort var(--brand) einträgst. Diese CSS-Variablen kannst du außerdem in deinem eigenen CSS verwenden.
Tipp: Es funktionieren alle gängigen CSS-Farbangaben. Der Color-Picker setzt standardmäßig HEX-Werte, du kannst aber auch Werte wie transparent oder (bei Hintergrundfarben) Farbverläufe verwenden.
Inhalte
Überschriften
Hier kannst du die Farben der Überschriften von <h1> bis <h6> individuell festlegen.
Statustexte
Passe hier die Farben verschiedener Status-Texte an. Beispiele: Erfolg wird bei positivem Lagerbestand genutzt, Gefahr bei ausverkauften Artikeln (z. B. als Lagerbestandsmeldung).
Tabellen
Hier passt du das Erscheinungsbild von HTML-Tabellen an. Du kannst z. B. einen eigenen Rahmen festlegen, eine abwechselnde Zeilenfarbe (jede zweite Zeile) definieren und die Textfarben innerhalb der Tabelle anpassen.
Layout
Modals / Popups
Modals und Popups sind z. B. Anmelde-Popups oder Fenster, die sich bei Versandinfos öffnen. Hier kannst du die Farben für Header, Inhalt und die darin enthaltenen Texte anpassen.
Panels / Boxen
Damit sind die standardmäßig leicht grau hinterlegten Boxen im Shop gemeint, z. B. Boxen in der linken Seitenleiste oder die Boxen im Warenkorb. Passe das Styling hier nach deinen Wünschen an.
Cards
Cards sind visuelle Boxen zur Gruppierung von Informationen – z. B. in der Übersicht deiner Daten im Kundenkonto. Hier bestimmst du das Aussehen dieser Cards.
Boxed-Layout
Wenn du im Bereich Layout das Boxed-Layout aktiviert hast, kannst du hier Feinabstimmungen vornehmen. Du kannst z. B. die Rahmenfarbe (sofern aktiviert) sowie die Hintergrundfarbe hinter und außerhalb des Boxed-Layouts festlegen, wenn kein Hintergrundbild verwendet wird.
Sidebar
Hier kannst du die Hintergrundfarbe der Sidebar anpassen, die sich z. B. beim Öffnen des Mini-Warenkorbs einblendet.
Footer
Hier kannst du die Farben deines Footers nach deinen Wünschen anpassen. So kannst du z. B. einen Footer gestalten, der sich farblich klar vom restlichen Content deines Shops abgrenzt.
Hersteller-Bilder
Hier stellst du die Hintergrundfarbe sowie die Rahmenfarbe für Hersteller-Bilder ein. Diese Einstellung gilt z. B. für den automatischen Hersteller-Slider, den du später im Bereich Spezialseiten für deine Startseite aktivieren kannst.
Header
Promotionbar
Passe hier das Erscheinungsbild deiner Promotionbar an. Die Promotionbar kannst du im Bereich Verkaufssteigerung aktivieren und z. B. für das Anteasern von Rabattaktionen nutzen.
Vorteilsleiste
Hier passt du das Styling der Vorteilsleiste an. Diese kannst du im Bereich Verkaufssteigerung aktivieren und bis zu vier Vorteile anzeigen lassen (z. B. „Kostenloser Versand ab X €").
Topbar
Wenn du im Bereich Layout die Topbar aktiviert hast, kannst du hier deren Styling anpassen. Du entscheidest, ob sie sich optisch an den Header anlehnt oder farblich bewusst abgesetzt wird.
Header
Hier bestimmst du die Farbgebung des Haupt-Headers, in dem Logo, Suche und Action-Buttons sitzen. So kannst du z. B. einen dunkleren Header als Kontrast zu einem insgesamt hellen Shop-Design umsetzen.
Suchfeld
Hier kannst du das Suchfeld im Header separat stylen. Standardmäßig ist es leicht grau hinterlegt. Du kannst dem Hintergrund aber auch per Vererbung die Header-Farbe geben (z. B. var(--hed-b)) und stattdessen nur mit einem Rahmen zur Abgrenzung arbeiten.
Kategoriemenü
Hier nimmst du Anpassungen am farblich hinterlegten Kategorie-Balken vor. Das ist z. B. beim Verwenden des Ultralight-Headers wichtig, da dieser die Hintergrundfarbe entfernt und sonst Links (z. B. weiß) auf weißem Hintergrund schwer sichtbar sind.
Passe in diesem Fall z. B. die Linkfarbe auf Schwarz an. Das Styling des Dropdown- oder Megamenüs passt du im nächsten Schritt an.
Megamenü
Hier passt du das Styling des Unterkategorie-Menüs an – abhängig davon, ob du das Megamenü oder Dropdown-Menü nutzt. Diese Farbeinstellungen gelten ebenfalls für das mobile Menü.
Breadcrumb
Passe hier das Styling der Breadcrumb-Navigation an. Standardmäßig hebt sie sich leicht vom Hintergrund ab – du kannst sie aber auch so einstellen, dass sie optisch mit dem Shop-Hintergrund verschmilzt.
Artikel-Seite
Knapper Lagerbestand
Den knappen Lagerbestand aktivierst du im Bereich Verkaufssteigerung. Ist die Funktion aktiv, sehen Besucher eine Progressbar, die zeigt, wie wenige Artikel noch verfügbar sind.
Über Hintergrund steuerst du die vollflächige Leiste, über Fortschritt die Farbe des Fortschrittbalkens.
Produktnavigation
Diese Einstellungen steuern die Farben der Navigation „Vorheriger / Nächster Artikel" auf der Artikelseite. Du kannst hier z. B. die Farben der Pfeile auf dem Produktbild des nächsten bzw. vorherigen Artikels anpassen.
Swatches
Swatches sind Variationsanzeigen (z. B. Text- oder Bild-Swatches). Du kannst diese in der WaWi aktivieren und hier das Styling der Swatch-Buttons nach Wunsch anpassen.
Tags
Tags werden im Shop z. B. bei Attribut- und Merkmalwerten oder beim Artikelgewicht angezeigt. Hier legst du fest, wie verlinkte Tags (z. B. Merkmalwerte) und nicht verlinkte Tags (z. B. Artikelgewicht) aussehen.
Empfehlung: Verwende unterschiedliche Farben, damit Besucher schnell erkennen, welche Tags anklickbar sind.
Kategorien & Artikelslider
Kategorie-Header
Im Standard-Snackys-Design ist der Header in Artikelkategorien leicht farblich vom restlichen Shop abgesetzt. Du kannst ihn hier stärker hervorheben oder optisch an deine Shopfarben anpassen.
Produktbox
Hier steuerst du das allgemeine Design der Produktboxen. Produktboxen werden z. B. in Artikelslidern oder in Produktlisten innerhalb von Kategorien verwendet.
Wenn du in Verkaufssteigerung den Countdown für Sonderpreise aktiviert hast, kannst du hier das Styling des Countdowns auf dem Bild anpassen. Wenn du im Bereich Produktivsten die erweiterte Schnellkauf-Funktion aktiviert hast, kannst du außerdem über Variation-Hover - Hintergrund die Farbe der Produktbox beim Hover definieren.
Artikelsticker
Ab Snackys 5.6.0 kannst du hier die Farben jedes einzelnen Sticker-Typs anpassen. Artikelsticker sind Badges auf Produktboxen, z. B. „Sale", „Top" oder „Auf Lager".
Artikelsticker verwalten
Artikelsticker steuerst du im Shop-Backend unter Darstellung > Standardelemente > Artikelsticker. Die Texte der Sticker kannst du in der Sprachverwaltung anpassen: Gehe zu Administration > Sprachvariablen und suche nach ribbon-. Du kannst dort auch Emojis verwenden.
Buttons
Hier kannst du die Farben deiner Buttons bis ins Detail anpassen – Hintergrund, Rahmen und Text, jeweils auch für den Hover-Zustand.
- Standard-Buttons: z. B. sekundäre Buttons im Shop (z. B. im Sidebar-Warenkorb der Button „Zum Warenkorb").
- Primär-Buttons: Buttons für die wichtigste Interaktion (z. B. „Zur Kasse" oder „In den Warenkorb").
- Status-Buttons: Erfolg, Info, Warnung, Gefahr – passend zu bestimmten Aktionen. Beispiel: Der Gefahr-Button wird z. B. beim Löschen des Kundenkontos genutzt und signalisiert eine kritische, unwiderrufliche Aktion.
Hinweise
Hinweise sind auffällige Meldungen oder Informationen im Shop, die in einer farblich hervorgehobenen Box dargestellt werden. Auch hier gibt es mehrere Typen: Standard, Erfolg, Warnung, Info, Gefahr.
Beispiele: Standard-Hinweise eignen sich für optionale Informationen. Warnungs-Hinweise erscheinen z. B. im Warenkorb, wenn sich der Versand eines Artikels verzögern kann.
Achte darauf, für jeden Hinweis-Typ passende Farben zu wählen, damit Besucher die Bedeutung schnell erfassen.
Steuerelemente
In diesem Bereich findest du besonders detailreiche Farbeinstellungen für verschiedene UI-Elemente deines Shops.
Dropdown-Menüs
Hier kannst du die Farbgestaltung von Dropdown-Menüs anpassen, z. B. beim Sprachwechsler, bei Variationen (Anzeige als Dropdown) oder bei Filtern in der oberen Leiste von Kategorien.
Dropdown-Buttons
Zusätzlich zum Dropdown-Menü kannst du hier auch die Buttons gestalten, die das Dropdown öffnen.
Eingabefelder
Diese Einstellungen gelten für alle Formularfelder im Shop, z. B. bei der Registrierung oder im Checkout.
Scrollbars
Passe hier das Aussehen der Scrollbars an. Bitte beachte, dass die Darstellung je nach Browser, Betriebssystem und Gerät unterschiedlich sein kann. Auf Mobilgeräten werden Scrollbars oft nicht angezeigt – dort greift diese Einstellung entsprechend nicht.
Badges
Hier stellst du das Styling von Badges ein – z. B. die Anzeige der Artikelanzahl im Warenkorb oder die Trefferanzahl bei Merkmalfiltern.
Checkboxen & Radios
Hier steuerst du die Darstellung von gestylten Checkbox- und Radiobutton-Auswahlen. Gestylte Checkboxen findest du z. B. in Merkmalfiltern, gestylte Radiobuttons z. B. im Checkout bei der Auswahl von Zahlungs- und Versandarten.
Progressbar
Ähnlich wie beim knappen Lagerbestand kannst du hier das allgemeine Erscheinungsbild von Progressbars anpassen. Diese werden z. B. für kostenlosen Versand, Gratisgeschenke (Gamification-Elemente in Verkaufssteigerung) oder für die Anzeige von Bewertungen pro Stern auf der Artikelseite verwendet.
Produktslider-Pfeile
Hier passt du die Farben der Pfeile für nächster / vorheriger Artikel in Produktslidern an.
Close-Button
Bestimme hier das Styling des Schließen-Buttons von Modals und z. B. der Warenkorb-Sidebar.
Consent Manager
Hier kannst du das Styling deines Consent-Managers individuell anpassen. Dafür gibt es eigene Farbeinstellungen, damit du deinen Shop nach Wunsch gestalten kannst, ohne dabei unbeabsichtigt das Consent-Design zu verändern.
Du kannst u. a. die Farben des Hinweisfensters, die Farben der Ablehnen- und Akzeptieren-Buttons sowie das Styling von Schaltern für aktivierte Trackings anpassen.