Webshop-Design gestalten

Dieses Dokument erklärt, wie Sie das Erscheinungsbild Ihres bessa-Webshops selbst gestalten — Farben, Schriften und die einzelnen Oberflächen. Anders als bei der Whitelabel-App liefern Sie hier keine Dateien an uns, sondern stellen alles direkt im Manager ein und sehen jede Änderung sofort in einer Live-Vorschau.

Sie finden die Seite im Manager unter Webshop → Design.

Auf einen Blick: was Sie einstellen können

Das Webshop-Design besteht aus zwei Schriften und mehreren Farbgruppen:

Schriften

1. Hauptschriftart — für den gesamten Fließtext

2. Varianten-Schrift — optionale Zweitschrift für Überschriften und Logos

Farbgruppen

1. Primärfarben — Ihre Markenfarbe für Header und Haupt-Buttons

2. Sekundärfarben — Akzentfarbe für sekundäre Aktionen (z. B. „Zur Kasse")

3. Flächen & Text — Hintergründe, Karten und die Textfarben darauf

4. Rahmen & interaktive Elemente — Linien, Trenner, deaktivierte Felder

5. Statusfarben — Hinweise, Warnungen und Fehlermeldungen

6. Bezahloberfläche — Farbe des Stripe-Zahlungsformulars

Jede Farbe hat einen sinnvollen Standardwert. Sie können also nur die Primärfarbe auf Ihre Marke setzen und alles andere lassen — oder jede einzelne Fläche gezielt anpassen.

So funktioniert die Seite

Live-Vorschau

Rechts (auf schmalen Bildschirmen unterhalb der Einstellungen) läuft eine echte Vorschau Ihres Shops. Sie aktualisiert sich sofort, während Sie Farben und Schriften ändern — Sie müssen nichts speichern, um eine Änderung zu sehen.

Die Vorschau hat zwei Umschalter:

• Menü / Bezahlung — zeigt entweder die Speisekarte mit Warenkorb oder den Bezahl- und Bestätigungsschritt an. So prüfen Sie beide wichtigen Bildschirme.

• Mobil / Desktop — schaltet zwischen Smartphone-Ansicht und voller Desktop-Breite um. Die Desktop-Vorschau erscheint in voller Breite unterhalb der Einstellungen.

Speichern und live schalten

• Design speichern sichert Ihren aktuellen Stand als Entwurf. Der echte Webshop ändert sich dadurch noch nicht — Sie können also in Ruhe weiterarbeiten und später fortsetzen.

• Live schalten veröffentlicht das gespeicherte Design im echten Webshop. Ab diesem Moment sehen Ihre Gäste die neuen Farben.

• Auf Standard zurücksetzen (oben rechts) setzt alle Farben und Schriften auf die bessa-Standardwerte zurück. Danach müssen Sie noch speichern bzw. live schalten, damit die Zurücksetzung wirksam wird.

Hinweise für die Gestaltung

Viele Farben treten als Paar auf: eine Flächenfarbe und die Textfarbe darauf (z. B. „Primärfarbe" und „Text auf Primärfarbe"). Achten Sie darauf, dass diese beiden immer genug Kontrast zueinander haben — sonst wird Text auf Buttons oder Kacheln unleserlich.

• Starker Kontrast bei den „Text auf …"-Farben. Für Fließtext gilt als Zielwert ein Kontrast von mindestens 4,5:1. Prüfen lässt sich das mit dem WebAIM Contrast Checker.

• Primärfarbe = Ihre Markenfarbe. Sie prägt Header und die wichtigsten Buttons und bestimmt den ersten Eindruck. Wählen Sie hier bewusst.

• Sekundärfarbe sichtbar von der Primärfarbe abheben. Sie markiert sekundäre Aktionen wie „Zur Kasse" und Fokus-Zustände in Formularen. Ist sie der Primärfarbe zu ähnlich, geht die Unterscheidung verloren.

• Statusfarben erkennbar halten. Warnung (Gelb/Amber) und Fehler (Rot) sind Signalfarben — verfremden Sie sie nicht zu stark, sonst werden Hinweise übersehen.

• Schriften kommen von Google Fonts. Beide Schriften werden automatisch geladen; Sie müssen nichts installieren. Wenn Sie nur eine Schrift nutzen möchten, setzen Sie Haupt- und Varianten-Schrift einfach gleich.

1. Typografie

Schriftarten werden automatisch von Google Fonts geladen.

Zur Auswahl stehen u. a. Roboto, Open Sans, Lato, Montserrat, Inter, Nunito, Poppins, Source Sans Pro, Raleway, Playfair Display und Bitter.

2. Farben im Detail

Jede Farbe wird über ein Farbfeld ausgewählt; darunter steht der jeweilige Hex-Wert. Die folgende Aufstellung erklärt, was jede Farbe im Shop steuert.

Primärfarben

Ihre Markenfarbe und die Kontrastfarbe dazu. Wird für zentrale Elemente wie Header und primäre Buttons verwendet.

Sekundärfarben

Akzentfarbe für sekundäre Aktionen (z. B. „Zur Kasse"-Button) und Hervorhebungen.

Flächen & Text

Hintergrund- und Flächenfarben sowie zugehörige Textfarben.

Rahmen & interaktive Elemente

Rahmenlinien, Trenner und Zustände für deaktivierte Felder.

Statusfarben

Farben für Hinweise, Warnungen und Fehlermeldungen.

Bezahloberfläche

Farben für das Stripe-Zahlungsformular.

Standardwerte auf einen Blick

Falls Sie einmal zu einem Ausgangspunkt zurückkehren möchten, hier alle Standardwerte (dieselben, die Auf Standard zurücksetzen wiederherstellt):

Was Sie hier nicht einstellen

Damit klar ist, was über diese Seite läuft und was nicht:

• Layout und Aufbau des Shops (Anordnung von Menü, Warenkorb, Schritten)

• Ihre Artikel, Preise und Kategorien — die pflegen Sie an den entsprechenden Stellen im Manager

• Produktbilder — die hinterlegen Sie beim jeweiligen Artikel

• Verfügbare Schriftarten — es steht die feste Auswahl an Google Fonts zur Verfügung

Verwandte Themen

• Web Bestellungen einrichten — Webshop als Widget oder eigene Seite einbinden und die übrigen Einstellungen vornehmen

Fragen oder unklare Stellen? Schreiben Sie uns an support@bessa.app. Wir helfen gern bei Farbentscheidungen oder mit einem ersten Designvorschlag.