Display settings
The per-menu-type appearance settings: the archive background, the menu icon, and the palette choices used by the navigation and the dock.
Where
Settings → Restaurant settings → Content settings → Content settings
The screen opens with the site-wide appearance groups, then repeats a block of settings for each enabled menu type.
Site-wide color groups
Category nav appearance
| Setting | Used by |
|---|---|
| Category nav divider color | The line under the navigation bar |
| Category nav text color | Links and the active indicator |
| Category nav background color | The bar and its side fades |
Contact dock toggle appearance
| Setting | Used by |
|---|---|
| Contact dock toggle text color | The toggle label and its icons |
| Contact dock toggle background color | The floating button, its label and its pulse |
Contact dock option appearance
| Setting | Used by |
|---|---|
| Contact dock inactive option background color | Options that are not the current menu |
| Contact dock inactive option text color | Their labels and icons |
| Contact dock active option background color | The current menu's option |
| Contact dock active option text color | Its label and icon |
Each of these picks a slot from the site palette rather than a free color, which is what keeps the interface consistent with the rest of the design.
Per menu type
For every enabled type:
| Setting | Effect |
|---|---|
| Background Image for … Archive | The background behind that menu |
| Icon for … | The menu's icon, used in the dock and navigation |
| Plural label for … | The name guests read |
Background images
Use a background as texture, not as content. A photograph competing with dish photos makes both unreadable.
Check text contrast over the light and dark parts of the image before publishing, and check it on a phone where the image is cropped differently.
Icons
Every menu type has a sensible default — cutlery, a croissant, a wine glass, a beer, a cocktail glass, a star, a menu sheet. Replace one when the default does not match the house, and keep replacements in the same visual family.
Icons render small. Silhouette matters more than detail. See Icons.
The palette itself
The palette these settings choose from is generated by the setup assistant from the light/dark choice and the two highlight colors. Changing it means re-running that step, which is a site-wide redesign rather than a tweak.
Contrast is the setting that matters
Every color choice here is read on a phone, at a table, in that room's lighting:
- the active dock option must be unmistakably different from the inactive ones;
- the navigation text must be legible against its background;
- icons must be visible against the surfaces behind them.
An elegant low-contrast combination that works on a designer's monitor is the most common design failure in a dining room.
After changing display settings
- [ ] Saved with Save Settings.
- [ ] Every menu checked signed out, on a phone, in the room's lighting.
- [ ] The active category and active dock option are obvious.
- [ ] Background images do not compete with content.
- [ ] Icons are legible at real size.
- [ ] Every menu type still looks like the same restaurant.