Zweck und Nutzen
Mit den Design-Einstellungen passt du die Optik deiner Shop-Ansicht mit geringem Aufwand an. Du kannst:
Farben anpassen: Akzentfarben, Hintergründe und Schriftfarben nach deinen Wünschen gestalten
Schriftarten ändern: Vorinstallierte Google Fonts oder eigene Schriftarten verwenden
Skalierung anpassen: Die Darstellungsgröße der gesamten Karte verändern
Alle Änderungen werden dir sofort in einer Live-Vorschau angezeigt – so siehst du direkt, wie deine Online-Karte aussieht, bevor du speicherst.
Hinweise zur Nutzung
Bevor es losgeht, hier noch ein paar Hinweise und Tipps für die Nutzung der Design-Einstellungen:
Weniger ist mehr - oft können zu viele verschiedene Farben, das Shop-Design unattraktiv oder unübersichtlich machen. Halte es nach Möglichkeit einfach und sauber
Zu wenig Kontrast zwischen den Farben - Es kann leicht passieren, dass durch eine ungünstige Farbwahl Button- oder Produktbeschreibungen nicht mehr richtig sichtbar sind. Achte deshalb darauf kontrastreiche Farben für Schriften im Vergleich zu Hintergründen, aber auch für Buttons im Vergleich zum Hintergrund zu verwenden. Teste unbedingt in dem du Bestellungen in den Warenkorb legst und verschiedene Funktionen ausprobierst.
Locationbild und Logo machen das Design erst komplett - füge unbedingt dein Logo und ein Locationbild hinzu, damit deine Shop-Ansicht wirklich zu deiner Gastronomie passt. Diese beiden kannst du nicht in den Design-Einstellungen, jedoch in den Locationeinstellungen hinterlegen. Hier findest du entsprechende Informationen. Im Übrigen helfen auch die richtigen Kategorie- und Artikelbilder, um eine Karte ansprechend wirken zu lassen.
Nutze dein vorhandenes Corporate-Design - solltest du bereits eine Website haben, dann verwende exakte die gleichen Farben wie dort. Kennst du die Hex-Codes deiner Corporate-Identity nicht, frage am besten deinen Webdesigner oder nutze eine Hex-Code-Picker.
Nun viel Spaß beim erstellen, deines eigenen Shop-Designs. Wenn du Fragen hast oder dir mit einem Design nicht sicher bist, sprich gerne deinen Account Manager an.
Design-Einstellungen öffnen
Mit folgenden Schritten gelangst du zu den Design-Einstellungen
Logge dich in dein SO'USE-Backoffice ein
Klicke oben links auf das Burgermenü, um die Einstellungen zu öffnen
Klicke anschließen auf die Accounteinstellungen (1. Zahnrad) und wähle Design-Einstellungen aus
Die sich öffnende Einstellungsseite teilt sich in zwei Bereiche:
Links: Alle Anpassungsoptionen (Farben, Schriftarten, Skalierung)
Rechts: Live-Vorschau deiner Änderungen
💡 Tipp: Prüfe die Darstellung nach jeder Änderung direkt in der Vorschau, um das beste Ergebnis zu erzielen.
Vorschau-Ansicht wählen
Oberhalb der Vorschau findest du die Schaltflächen Karte und Warenkorb. Wähle hier aus, welchen Bereich du in der Vorschau sehen möchtest. Du kannst jederzeit flexibel wechseln:
Karte: Zeigt die Darstellung deiner Speisekarte
Warenkorb: Zeigt die Darstellung des Warenkorbs
Farben anpassen
Farbwähler verwenden
Bevor wir dir erklären, welche verschiedenen teile deiner Shop-Ansicht du mit den einzelnen Farbeinstellungen veränderst, hier zunächst ein paar Informationen zum Farbwähler.
Du öffnest diesen in dem du neben den einzelnen Optionen (wie Akzent-Farbe, Hintergrund, etc.) auf den Kreis mit der Farbe klickst.
Der Farbwähler hilft dir, präzise die gewünschte Farbe und Transparenz einzustellen:
Oberes Feld (1): Wähle die exakte Farbe aus
Schieberegler Farbspektrum (2): Bestimme den Farbton
Schieberegler Transparenz (3): Lege die Deckkraft fest
💡 Tipp: Wenn du die Hex-Codes deines Corporate-Designs kennst, kannst du diese auch direkt hier eingeben. Über die Pfeile neben dem Eingabefeld kannst du auch zum HSLA- oder RGBA-Farbmodell wechseln.
Farben
Akzent-Farbe
Die Akzent-Farbe bestimmt die Farbe von Icons und Schaltflächen:
Kasse-Button
Einkaufswagen-Icon
Suche-Icon
Weitere interaktive Elemente
Akzent-Farbe 2
Die Akzent-Farbe 2 bestimmt die Farbe von Beschriftungen auf Schaltflächen und Kategorieüberschriften.
❗ Achtung: Achte auf ausreichenden Kontrast zwischen Akzent-Farbe und Akzent-Farbe 2 damit die Beschriftungen der Buttons gut zu lesen sind.
💡 Tipp: In den meisten Fällen ist es sinnvoll als Akzent-Farbe 2 die gleiche Farbe wie für Controls/Item Schriftfarbe zu verwenden. So vermeidest du ein zu buntest Shop-Design.
Location-Info/Warenkorb
Controls/Item-Hintergrund
Diese Option legt die Hintergrundfarbe der gesamten Shop-Ansicht, aber auch einzelner Kontrollfächen fest (im Screenshot mit (1) markiert). Also bspw. den Hintergrund der Artikel oder des Warenkorbs, wenn dieser neben der Karte zu sehen ist, wie hier im Bild (vgl. Warenkorb neben der Speisekarte ausblenden).
Controls/Item Schriftfarbe
Hierüber wird die allgemeine Schriftfarbe bestimmt (im Screenshot mit (2) markiert).
❗ Achtung: Ausnahme - aktive Kategorienamen (wie hier Getränke) und Beschriftungen auf Schaltflächen (wie zur Kasse) werden durch die Akzent-Farbe 2 gesteuert.
Karte
Hintergrund
Hier kannst du wiederum die Hintergrundfarbe der Speisekarte wählen (im Screenshot mit (3) gekennzeichnet).
💡 Tipp: Damit sich z.B. die Artikel sinnvoll vom Hintergrund abheben, sollte hier eine andere Farbe als die Controls/Item-Hintergrund Farbe genutzt werden. Da aber ein zu großer Unterschied zwischen den beiden Farben auch eher plump wirkt, kannst du z.B. eine Schattierung der Controls/Item-Hintergrund Farbe verwenden. Siehe Schieberegler für Transparenz weiter oben.
Info: Du kannst auch für einzelnen Kategorien die Hintergundfarbe nochmal separat einstellen. Die Einstellung findest du direkt an der jeweiligen Kategorie im Karteneditor.
Kategorie Hintergrund und Kategorie Hintergrund 2
Diese beiden Farben legen den Farbverlauf (4) im Hintergrund des Kategorienamens fest.
💡 Tipp: Verwende bei beiden Optionen einfach die gleiche Farbe, wenn du keinen Farbverlauf möchtest.
❗ Achtung: Der Kategoriehintergrund sollte sich klar vom Hintergrund der Speisekarte abheben.
Item-Trennstrich
Hier kannst du die Farbe der Trennstriche zwischen Karte und Warenkorb sowie zwischen den Artikeln und dem Summenblock im Warenkorb steuern. (im Screenshot mit (5) gekennzeichnet). Außerdem sind manuell eingestellte Trennstriche in dieser Farbe gehalten.
💡 Tipp: Diese Option bietet eine tolle Möglichkeit für farbliche Akzente, kann aber auch wunderbar im gleichen Farbton wie der Hintergrund (Speisekarte) gehalten werden. Idealerweise hebt sich die Farbe von der Controls/Item-Hintergrund-Farbe ab.
Schriftarten anpassen
Bei den Schriftarten unterscheiden wir zwischen:
Highlight-Schriftart (1): Wird für Überschriften wie im Warenkorb und der Kategorie verwendet
Standard-Schriftart (2): Für alle anderen Texte
💡 Tipp: Verwende nach Möglichkeit nicht zwei komplett unterschiedliche Schriftarten, sondern viel mehr unterschiedliche Typen der gleichen Schriftart (bspw. Altivo bold für die Highlight-Schriftart und Altivo regular für die Standard-Schriftart).
Vorinstallierte Schriftarten auswählen
Wir bieten dir die Möglichkeit aus vorinstallierten Schriftarten zu wählen, falls du keine eigene Schriftart für dein Markendesign hast und mit der Standardvariante nicht zufrieden bist.
So wählst du eine vorinstallierte Google Font aus:
Klicke auf den kleinen Pfeil (1), um das Dropdown-Menü aufzuklappen
Wähle eine der vorinstallierten Google Fonts aus
Wähle, ob die Schriftart fett oder standardmäßig dargestellt werden soll (2)
Speichere die Änderungen
Lade die Seite neu, damit die Änderungen korrekt angezeigt werden
Info: Leider kann die gewählte Schriftart nicht in der Vorschau angezeigt werden. Du musst erst speichern, um ihre Wirkung sehen zu können.
Eigene Schriftarten hochladen
Wir bieten dir ebenfalls die Möglichkeit eigene Schriftarten hoch zu laden. Das ist dann ideal, wenn dein Coporate Design bereits mit einer eigenen Schriftart arbeitet.
Befolge dafür diese Schritte:
Klicke zunächst auf die Schaltfläche Eigene Schriftarten hochladen (befindet sich direkt unterhalb des Menüpunkts Schriftarten) - so wechselst du die Ansicht, wie im Bild dargestellt
Wähle die Datei für die Highlight-Schriftart (obere Auswahl)
Wähle die Datei für die Standard-Schriftart (untere Auswahl)
Klicke auf Speichern
Lade die Seite neu, um die geänderten Schriftarten in der Vorschau zu sehen
💡 Tipp: Wenn sich die Schriftart durch das Neuladen der Seite nicht ändert, klicke auf Zur Speisekarte oder Zur App, um in die Shop-Ansicht zu gelangen. Dort sollte die Schriftart dann geladen sein. Wenn du die Design-Einstellungen jetzt neu lädst, solltest du auch hier die Änderungen sehen.
Info: Leider können nicht alle Schriftarten zwingend verwendet werden. Idealerweise verwendest du Formate, wie .ttf oder .otf.
💡 Tipp: Mit Google Fonts benutzen kehrst du zur Nutzung der vorinstallierten Schriftarten zurück. Nicht mit reset!
Karte skalieren
Hierüber kannst du die Darstellung des gesamten Inhaltes in der Größe verändern. Das ist z.B. dann nützlich, wenn du eine eigene Schriftart verwendest, die eher klein ausfällt.
Und so geht's:
Nutze den Schieberegler Karte skalieren
Wähle einen Wert zwischen 70% und 130%
Speichere die Änderungen
Prüfe die Darstellung in der Vorschau durch ein Reload der Seite
Info: Leider siehst du die Skalierung erst nachdem du gespeichert hast. Solltest du keinen Unterschied sehen, wechsle in die Shop-Ansicht (über Zur Speisekarte oder Zur App) und schau dir die Änderungen dort an.
Änderungen speichern
Deine Änderungen werden erst übernommen, wenn du auf Speichern (oben rechts) klickst.
Vorteile dieser Funktion:
Du kannst verschiedene Designs ausprobieren, ohne sie sofort zu veröffentlichen
Verlasse die Design-Einstellungen ohne zu speichern, und alles bleibt wie vorher
Teste Änderungen in Ruhe, bevor sie live gehen
Info: Direkt links neben dem Speichern-Button befindet sich der Button Zur App. Dieser hat die gleiche Funktion, wie Zur Speisekarte und bringt dich in deine Shop-Ansicht.
Design zurücksetzen
Wenn du mit deinen Änderungen nicht zufrieden bist und schon gespeichert hast oder generell nochmal ein neues Design von Beginn an aufsetzen willst, kannst du das Design mit der Reset-Button zurücksetzen.
❗ Achtung: Diese Aktion kann nicht rückgängig gemacht werden. Alle individuellen Anpassungen gehen verloren. Der Reset muss auch nicht gespeichert werden, um tatsächlich aktiv zu werden. Die Design-Einstellungen werden sofort wieder auf Standard zurückgesetzt.
FAQ
Warum sehe ich meine Schriftarten-Änderungen nicht in der Vorschau?
Die Vorschau kann Schriftarten-Änderungen leider nicht anzeigen. Du musst erst speichern und die Seite neu laden, um die Wirkung zu sehen. Wenn du die Änderungen auch dann nicht siehst, klicke auf Zur Speisekarte oder Zur App, um in die Shop-Ansicht zu gelangen. Dort sollte die Schriftart geladen sein.
Was ist der Unterschied zwischen Akzent-Farbe und Akzent-Farbe 2?
Akzent-Farbe: Farbe für Buttons und Icons (z. B. roter Kasse-Button, roter Einkaufswagen im Standard-Design)
Akzent-Farbe 2: Beschriftung auf Buttons und Kategorieüberschriften (z. B. weiße Schrift auf rotem Button im Standard-Design)
❗Achtung: Achte auf ausreichenden Kontrast zwischen beiden Farben, damit die Beschriftungen gut lesbar sind. In den meisten Fällen ist es sinnvoll, als Akzent-Farbe 2 die gleiche Farbe wie für Controls/Item Schriftfarbe zu verwenden.
Was passiert, wenn ich die Seite verlasse ohne zu speichern?
Alle Änderungen gehen verloren, und deine Shop-Ansicht behält das vorherige Design. Das gibt dir die Freiheit, verschiedene Varianten auszuprobieren, ohne sie sofort zu veröffentlichen.
Wo kann ich mein Logo und Locationbild hochladen?
Logo und Locationbild kannst du nicht in den Design-Einstellungen hinterlegen, sondern in den Locationeinstellungen. Diese Elemente sind wichtig, um das Design zu vervollständigen und deine Shop-Ansicht wirklich zu deiner Gastronomie passend zu machen.
Welche Schriftart-Formate kann ich hochladen?
Idealerweise verwendest du Formate wie .ttf oder .otf. Leider können nicht alle Schriftarten zwingend verwendet werden. Wenn deine Schriftart nicht funktioniert, probiere ein anderes Format aus oder kontaktiere deinen Account Manager.
Wie finde ich die Hex-Codes meines Corporate-Designs?
Wenn du bereits eine Website hast, solltest du exakt die gleichen Farben verwenden wie dort. Kennst du die Hex-Codes deiner Corporate-Identity nicht, frage am besten deinen Webdesigner oder nutze einen Hex-Code-Picker.
Warum sehe ich die Skalierung nicht in der Vorschau?
Die Skalierung wird leider erst nach dem Speichern sichtbar. Solltest du keinen Unterschied sehen, wechsle in die Shop-Ansicht über Zur Speisekarte oder Zur App und schau dir die Änderungen dort an.
Was macht der "Zur App"-Button?
Der Zur App-Button befindet sich direkt links neben dem Speichern-Button und hat die gleiche Funktion wie Zur Speisekarte. Er bringt dich direkt in deine Shop-Ansicht, wo du alle Änderungen live sehen kannst.
Sollte ich die gleichen Farben für Highlight- und Standard-Schriftart verwenden?
Verwende nach Möglichkeit nicht zwei komplett unterschiedliche Schriftarten, sondern viel mehr unterschiedliche Typen der gleichen Schriftart (z.B. Altivo bold für die Highlight-Schriftart und Altivo regular für die Standard-Schriftart). Das sorgt für ein harmonisches Design.
Wie vermeide ich ein zu buntes Shop-Design?
Weniger ist mehr! Zu viele verschiedene Farben können das Shop-Design unattraktiv oder unübersichtlich machen. Halte es nach Möglichkeit einfach und sauber. Als Faustregel gilt:
Verwende für Controls/Item Schriftfarbe und Akzent-Farbe 2 idealerweise die gleiche Farbe
Nutze Schattierungen der gleichen Farbe für Hintergrund und Controls/Item-Hintergrund
Verwende maximal drei verschiedene Farben
Troubleshooting
Mein Shop-Design wirkt unübersichtlich oder unattraktiv
Zu viele verschiedene Farben verwendet
Reduziere die Anzahl der Farben. Halte das Design einfach und sauber
Tipp: Verwende maximal 2-3 Hauptfarben plus deren Schattierungen
Farben passen nicht zum Corporate Design
Nutze die Hex-Codes deiner Website oder deines bestehenden Corporate Designs
Verwende einen Hex-Code-Picker, um die exakten Farben zu ermitteln
Zu wenig Kontrast zwischen den Elementen
Stelle sicher, dass sich Hintergrund, Controls/Item-Hintergrund und Kategorie-Hintergrund klar voneinander abheben
Teste, ob alle Texte gut lesbar sind
Unsicher beim Design?
Sprich deinen Account Manager an. Er kann dir Tipps geben oder Beispiele zeigen
Beschriftungen auf Buttons sind nicht lesbar
Zu wenig Kontrast zwischen Akzent-Farbe und Akzent-Farbe 2
Wähle kontrastreichere Farben im Farbwähler
Beispiel: Dunkler Button (Akzent-Farbe) + helle Schrift (Akzent-Farbe 2) oder umgekehrt
Transparenz zu hoch eingestellt
Reduziere die Transparenz im Farbwähler für bessere Lesbarkeit
Tipp: Verwende den Schieberegler im Farbwähler
Gleiche oder ähnliche Farben gewählt
Teste die Lesbarkeit, indem du Produkte in den Warenkorb legst und verschiedene Funktionen ausprobierst
Wechsle in die Warenkorb-Ansicht der Vorschau, um die Button-Beschriftungen zu prüfen
Meine Schriftarten werden nicht angezeigt
Seite nicht neu geladen nach dem Speichern
Lade die Seite nach dem Speichern neu (F5 oder Strg+R)
Wenn das nicht hilft: Wechsle über Zur Speisekarte oder Zur App in die Shop-Ansicht, um deine Änderungen zu sehen
Schriftart-Format nicht unterstützt
Verwende idealerweise .ttf oder .otf Formate
Nicht alle Schriftarten können verwendet werden
Schriftart nicht korrekt hochgeladen
Prüfe, ob du sowohl Highlight- als auch Standard-Schriftart hochgeladen hast
Stelle sicher, dass du nach dem Upload auf Speichern geklickt hast
Lade die Schriftarten im Zweifelsfall noch einmal neu hoch
Vorschau zeigt Schriftarten grundsätzlich nicht an
Das ist normal! Die Vorschau kann Schriftarten-Änderungen nicht anzeigen
Du musst speichern und neu laden oder ggf. zur Shop-Ansicht wechseln, um die Änderungen zu sehen
Hintergrund und Artikel sind nicht voneinander zu unterscheiden
Gleiche Farbe für Hintergrund und Controls/Item-Hintergrund
Wähle für Hintergrund (Speisekarte) eine andere Farbe als für Controls/Item-Hintergrund
Tipp: Nutze eine Schattierung der gleichen Farbe für ein harmonisches Gesamtbild
Zu wenig Kontrast
Erhöhe den Kontrast zwischen den Farben
Tipp: Verwende den Transparenz-Schieberegler, um unterschiedliche Helligkeitsstufen zu erzeugen
Item-Trennstrich nicht sichtbar
Passe die Farbe des Item-Trennstrichs an, damit er sich von Controls/Item-Hintergrund abhebt
Tipp: Der Trennstrich kann farbliche Akzente setzen oder dezent im Hintergrund-Farbton gehalten werden
Kategoriefelder heben sich nicht vom Hintergrund ab
Kategorie-Hintergrund zu ähnlich zum Speisekarten-Hintergrund
Der Kategoriehintergrund sollte sich klar vom Hintergrund der Speisekarte abheben
Wähle eine kontrastierende Farbe
Farbverlauf ungewollt
Lösung: Wenn du keinen Farbverlauf möchtest, verwende für Kategorie Hintergrund und Kategorie Hintergrund 2 einfach die gleiche Farbe
Skalierung hat sich nicht geändert
Änderungen nicht gespeichert
Klicke auf Speichern oben rechts
Die Skalierung wird erst nach dem Speichern sichtbar
Vorschau zeigt Skalierung nicht an
Das ist normal! Wechsle über Zur Speisekarte oder Zur App in die Shop-Ansicht
Lade die Design-Einstellungen neu, um die Änderungen auch dort zu sehen
Skalierungswert zu nah am aktuellen Wert
Teste mit größeren Unterschieden (z. B. 70% vs. 130%), um den Effekt besser zu sehen
Reset-Button hat mein Design gelöscht, obwohl ich nicht gespeichert habe
Das ist leider korrekt:
Der Reset-Button setzt die Design-Einstellungen sofort zurück, ohne dass du speichern musst. Diese Aktion kann nicht rückgängig gemacht werden.
Empfehlung für die Zukunft:
Sei vorsichtig mit dem Reset-Button
Wenn du nur deine eigenen Schriftarten zurücksetzen möchtest, nutze Google Fonts benutzen statt Reset
Notiere dir vor größeren Änderungen deine Hex-Codes und Einstellungen
Hex-Code-Eingabe funktioniert nicht
Falsches Format
Hex-Codes beginnen mit # und haben 6 Zeichen (z. B. #FF0000 für Rot)
Prüfe, ob du das Format korrekt eingegeben hast
Farbwähler nicht geöffnet
Lösung: Klicke auf den Kreis mit der Farbe neben der jeweiligen Option, um den Farbwähler zu öffnen
Dort kannst du den Hex-Code im oberen Feld eingeben
Ich bin unsicher, welche Farben zusammenpassen
Nutze dein bestehendes Corporate Design
Verwende die exakten Hex-Codes deiner Website
Frage deinen Webdesigner nach den Farben
Teste verschiedene Kombinationen
Nutze die Vorschau-Funktion
Verlasse die Design-Einstellungen ohne zu speichern, wenn dir das Ergebnis nicht gefällt
Hole dir professionelle Hilfe
Sprich deinen Account Manager an
Er kann dir Beispiele zeigen und Tipps geben
Verwende einen Hex-Code-Picker
Wenn du Farben von deiner Website oder anderen Quellen übernehmen möchtest
Damit ermittelst du die exakten Farbwerte