Shop Erscheinungsbild

Zuletzt aktualisiert: 2026-10-01

Im Shop Erscheinungsbild legst du fest, wie dein Online-Shop für deine Kunden aussieht — Farben, Schrift, Rundungen, Kartenschatten und die Farben von Preisen und Bestandshinweisen. So passt der Shop zu deinem Firmenauftritt, ohne dass jemand Programmcode anfassen muss. Die Einstellung wirkt nur auf den Shop: Wie flinkest selbst für dein Team aussieht, regelt getrennt davon das Erscheinungsbild. Die Seite findest du unter Einstellungen → Shop → Shop Erscheinungsbild, solange das Modul Shop unter Einstellungen → Module eingeschaltet ist. Wie für den gesamten Einstellungsbereich brauchst du Administratorrechte.

Aufbau der Seite

Drei Reiter und die Live-Vorschau

Links stehen die Einstellungen in drei Reitern: Farben & Formen, Status & Dichte und Karten & Produkte. Rechts läuft unter der Überschrift Live-Vorschau ein verkleinerter Ausschnitt des Shops mit, der jede Änderung sofort zeigt — für alle drei Reiter dieselbe Vorschau. Die Vorschau färbt nur sich selbst um: Die flinkest-Oberfläche um sie herum bleibt unverändert, und deine Kunden sehen im Shop erst etwas, wenn du gespeichert hast. Der aktive Reiter steht als Anker in der Adresszeile (#brand, #advanced, #shop), ein Lesezeichen öffnet also direkt den passenden Reiter.

Speichern sichert alle Reiter auf einmal

Speichern oben rechts sichert mit einem Klick alles, was du verstellt hast: den Reiter, in dem du gerade stehst, immer — die anderen dann, wenn du dort etwas geändert hast. Du kannst also Farben wählen, zu Karten & Produkte wechseln, den Schatten einstellen und einmal speichern. Ein Reiter, den du nicht angefasst hast, wird bewusst nicht mitgeschrieben, damit seine Vorgabewerte keine gespeicherten Einstellungen überdecken. flinkest bestätigt mit „Erscheinungsbild gespeichert". Im Shop wirkt die Änderung, sobald eine Kundin oder ein Kunde den Shop neu lädt.

Auf Standard zurücksetzen

Auf Standard zurücksetzen stellt alle drei Reiter auf ihre Grundwerte zurück — die Shop-Grundfarben, alles andere auf Standard — und speichert sofort, ohne Rückfrage. Deine eigenen Werte sind danach weg; flinkest bestätigt mit „Erscheinungsbild auf Standard zurückgesetzt". Ein „Rückgängig" gibt es nicht: Notiere dir Farbwerte, die du später wiederverwenden willst, vorher.

Reiter „Farben & Formen"

Farben

Vier Farbfelder bestimmen die Grundfarben des Shops:

Primärfarbe — Hauptschaltflächen wie „In den Warenkorb", der Navigationslink zur Startseite und die Standard-Rahmenfarbe im Shop.
Akzentfarbe — Textfarbe der Akzent-Texte (z. B. beim leeren Warenkorb und wenn noch keine Bestellungen vorliegen) sowie die Farbe von Links.
Interaktive Farbe — die Hervorhebung beim Überfahren der Navigation und der Rahmen des Warenkorb-Symbols in der Kopfzeile.
Hintergrund-Akzentfarbe — Hintergrundfarbe der Kopfzeile und der Navigationsleiste.

Vorlagen

Die Vorlagen Grün (Alt-Modus 1), Blau (Alt-Modus 2) und Rot (Alt-Modus 3) füllen die vier Farbfelder mit einer fertig abgestimmten Kombination — das sind die Farbsätze, zwischen denen man in früheren flinkest-Versionen wählen konnte. Eine Vorlage ändert nur die Felder und die Vorschau; gespeichert ist sie erst mit Speichern. Danach kannst du einzelne Farben weiter anpassen.

Oberflächenton, Eckenradius und Schrift

Oberflächenton — der neutrale Grundton für Seitenhintergrund, Karten und Eingabefeld-Rahmen: Standard, Slate, Gray, Zinc, Neutral oder Stone.
Eckenradius (Bedienelemente) — wie rund Schaltflächen, Eingabefelder und andere Bedienelemente sind (Standard, Keine, Klein, Mittel, Groß). Die Produkt-, Bestell- und Warenkorb-Karten stellst du getrennt im Reiter Karten & Produkte ein.
Schriftart — Grundschrift und Textgröße im ganzen Shop. Die erste Auswahl legt die Schrift fest, die zweite die Größe (Standard oder 12 bis 16 px).

Reiter „Status & Dichte"

Statusfarben

Vier Farben für Hinweise und Zustände im Shop:

Erfolg — z. B. der Zahlungsstatus einer vollständig bezahlten Bestellung.
Gefahr — z. B. der Status einer unbezahlten Bestellung und die Schaltfläche zum Entfernen eines Artikels aus dem Warenkorb.
Warnung — z. B. der Hinweis auf eine Mindestbestellmenge und der Status „teilweise bezahlt".
Info — z. B. das Hinweisband auf der Anmeldeseite.

Dichte

Kompakt, Normal oder Komfortabel bestimmt, wie viel Innenabstand Eingabefelder haben — etwa die Felder beim Anmelden und Registrieren. Kompakt passt mehr auf den Bildschirm, Komfortabel ist auf Touch-Geräten angenehmer.

Reiter „Karten & Produkte"

Karten & Flächen

Karten-Eckenradius — wie rund die Produkt-, Bestell- und Warenkorb-Karten sind (Standard, Keine, Klein, Mittel, Groß, XL).
Schatten — Schlagschatten auf diesen Karten: Keine, Dezent oder Betont.

Typografie

Überschriften-Schriftart — Schrift für Überschriften und das Navigations-Label, z. B. „Standard (Abel)", Inter oder Montserrat.
Überschriften in Großbuchstaben — ob Überschriften und das Navigations-Label in Großbuchstaben erscheinen.
Akzent-/Schmuckschrift — Aus oder eine Handschrift für die Meldungen beim leeren Warenkorb und die Bestellbestätigung. Ihre Farbe kommt aus der Akzentfarbe im Reiter Farben & Formen.

Handels-Signale

Preis-Hervorhebungsfarbe — Textfarbe der Produktpreise in der Produktliste und im Warenkorb.
Warnfarbe für niedrigen Bestand — Textfarbe des Hinweises bei Produkten, die fast ausverkauft sind.

Häufige Fragen

Ändert diese Seite auch, wie flinkest für mein Team aussieht? Nein. Die Einstellungen wirken nur im Shop, und auch die Live-Vorschau färbt nur sich selbst um. Für die flinkest-Oberfläche ist das Erscheinungsbild zuständig.

Muss ich jeden Reiter einzeln speichern? Nein. Speichern sichert den Reiter, in dem du stehst, und jeden anderen Reiter, in dem du etwas geändert hast — in einem Schritt.

Warum sehen meine Kunden die neuen Farben noch nicht? Der Shop übernimmt das gespeicherte Erscheinungsbild beim Laden. Wer den Shop schon offen hat, sieht die Änderung nach dem nächsten Neuladen der Seite.

Warum wirkt der Eckenradius nicht auf die Produktkarten? Eckenradius (Bedienelemente) gilt nur für Schaltflächen, Eingabefelder und ähnliche Bedienelemente. Die Rundung der Karten stellst du mit Karten-Eckenradius im Reiter Karten & Produkte ein.

Kann ich das Zurücksetzen rückgängig machen? Nein. Auf Standard zurücksetzen speichert sofort und ohne Rückfrage; die vorherigen Werte sind danach nicht mehr abrufbar.