Branding Profiles

Overview

Branding profiles control the visual appearance of your Kiosk and Online Ordering interfaces. Each profile defines a name, logos, a banner, fonts, colors, promo-code styling, social links, and Apple Wallet pass styling.

Separately, the Kiosk and Online Ordering apps each ship a standalone Branding Studio (/branding-preview) that lets you experiment with colors, fonts, logo, banner and even a custom menu against the real kiosk/storefront UI — without touching an actual branding profile. See Branding Studio below.

Purpose

This page lets you create and manage reusable visual themes that define how your brand appears to customers on kiosks and online ordering. Each location must be assigned a branding profile.

Key Concepts

Branding Profile: A reusable visual theme containing a name, logos, banner, fonts, colors, promo-code styling, social links, and Apple Wallet pass styling.
Default Profile: One profile can be flagged as the merchant default and used as the fallback.
Logo: Your business logo displayed in headers and online ordering.
Banner: Image shown at the top of the ordering menu (online and on kiosks).
Primary Color: Main brand color.
Social Links: Links to your social media profiles.

Route

Backoffice Route: /settings/brand (profile list, route name settings-brand)
Profile Detail: /settings/brand/profiles/:id (route name settings-brand-profiles-detail-id)
Navigation: Settings → Brand (the side-nav item is labelled "Brand")

Actions

Create New Branding Profile

On the profile list, click the New Profile button. A dialog titled "New Branding Profile" opens. Enter a name, then click Setup Profile to create the profile and open its detail page.

Edit Branding Profile

From the list, use Edit (or the "⋮" menu for non-default profiles) to open the detail page and edit settings. Click Save to persist changes.

Set as Default

From the "⋮" menu of a non-default profile, choose Set as default to make it the merchant default profile.

Delete Branding Profile

On the profile detail page, click Delete Profile. A confirmation dialog requires you to type the profile name. A profile cannot be deleted while it is assigned to one or more locations (the backend rejects it with "Cannot delete branding profile with locations").

Profile Sections

The detail page is split into six sections (matching the side menu): General, Logos & Banner, Fonts & Colors, Promo Codes, Social Links, and Apple Wallet.

Note: the branding-profile record also stores a landing page image (landing_page_image → landing_page_content_id), used on the Online Ordering landing page. It is not edited on the Brand page — it lives under Online Ordering settings, labelled "Landing page image" ("JPG, PNG, SVG or WEBP image. Recommended size: 720 x 480").

General

Name: Profile name. Required and must be unique. (The form UI also enforces 5–25 characters.)
Slogan: Brand statement or tagline. Optional, max 100 characters.
Short Description: Business description used in bios and listings. Optional, max 150 characters.

Logo: Main logo shown on every device and website. Required. JPG, PNG or WEBP, max 10 MB.
Receipt Logo: Optional black & white logo for printed kiosk receipts. JPG, PNG or WEBP. Falls back to the main logo if not set.
Favicon: Browser-tab icon. Required. JPG, PNG, ICO or WEBP. Falls back to the logo if none is provided.
Banner: Image shown at the top of the ordering menu (online and kiosks). Required. JPG, PNG, SVG or WEBP, max 10 MB.

Note: every on-screen caption in this section says max 5MB, but both the client-side validator and the backend actually accept up to 10 MB (max:10240). The favicon has no server-side size rule at all — only the shared 10 MB client-side check.

Fonts & Colors

Two font selections and six colors:

Heading text (font) and Body text (font)
Primary color, Secondary color
Primary text color, Secondary text color
Primary background color, Secondary background color

All six colors are required and stored as 6-digit hex (#RRGGBB).

Styles how promo codes appear on menus when active:

Promo code font
Promo code font color (required hex)
Promo code background color (required hex)

Add one or more social-media links. Supported platforms: TikTok, Instagram, Facebook, Pinterest, X, LinkedIn, YouTube, Snapchat, Tumblr. Each link, when provided, must be a valid URL.

Apple Wallet

Styles the loyalty member card shown in Apple Wallet:

Wallet Program Name: Optional, max 50 characters. Overrides the merchant name on the pass header; leave empty to use the branding-profile name.
Wallet Strip Image: Optional. Displayed behind the card info. JPG, PNG or WEBP (recommended 750×246 px). Falls back to the banner if not set.

Field Constraints

Backend validation (source of truth) for the update endpoint:

Name: required, string, unique per merchant.
Slogan: optional, max 100 characters.
Short Description: optional, max 150 characters.
Logo / Banner: required image, max 10 MB each.
Receipt Logo / Wallet Strip: optional images, max 10 MB each when supplied.
Favicon: optional at the request level; when supplied its file is required but carries no server-side size limit (the 10 MB ceiling is client-side only).
Landing page image: optional, max 10 MB. Edited under Online Ordering settings, not on the Brand page.
Fonts (heading, body, promo): required strings, chosen from the font list.
Colors (6 theme colors + promo font/background colors): required strings (hex).
Social Links: optional; each provided link must be a valid URL.
Wallet Program Name: optional, max 50 characters.

Note: The form UI additionally enforces a 5–25 character range on Name and a 5–100 / 5–150 minimum on Slogan / Short Description, but the backend only enforces the max lengths above.

Available Fonts

Backend stored font options (source of truth): Poppins, Arial, Roboto, Raleway, Lato, Verdana, Courrier New, Lora, Gelasio, Cormorant Garamond, Oswald.

Note: There is a known mismatch between backend and front-office. The backend stores Courrier New (with the double-r typo) and includes Gelasio. The back-office font picker shows Courier New (correct spelling) and omits Gelasio. The backend values are what is persisted.

Branding Studio (`/branding-preview`)

The page is titled Kiosk Branding Studio on the kiosk app and Branding Studio on the online-ordering app, with the sub-caption "Live preview of the real kiosk menu / online ordering storefront, using preview data from the backend."

A live, self-serve preview tool exists as a standalone page in both the Kiosk and Online Ordering apps — it is not part of the backoffice and is not reached via Settings → Brand.

Route: /branding-preview, opened directly on the Kiosk app's or the Online Ordering (storefront) app's own URL (e.g. the kiosk web build or the merchant's ordering domain), not inside /settings/....
It renders the real kiosk menu / storefront components inside a device-frame iframe, seeded from a dedicated, public "preview merchant" dataset (produced by BrandingPreviewSeeder) — not the merchant's own branding profile or menu data. Changes made here never touch a real branding profile.
The backend serves this dataset from two public, unauthenticated endpoints: GET /branding-preview/kiosk and GET /branding-preview/online-ordering.

Studio Controls

Quick themes: six one-click presets — Sunset, Forest, Berry, Ocean, Charcoal, Classic — each setting all colors (and fonts) at once. A "Custom" swatch opens a native color picker for the primary color.
Logo & Banner: file pickers for logo and banner. Unlike the real branding profile (uploaded and stored server-side, max 10 MB), these are read client-side with FileReader and embedded as base64 data URLs directly in the preview state — they are never uploaded to storage.
Colors: the same six theme colors as a branding profile — Primary, Secondary ("Accent / lines"), Primary background ("Background"), Secondary background ("Surface"), Primary text ("Text"), Secondary text ("Muted text").
Typography: Kiosk offers separate Heading font and Body font pickers; Online Ordering offers a single Font (body) picker. Font options match the branding-profile list: Poppins, Arial, Roboto, Raleway, Lato, Verdana, Courrier New, Lora, Gelasio, Cormorant Garamond, Oswald.
Layout (Kiosk only): a "Grid columns" slider (2–3, mirrors the device profile's menu_item_columns) and a Currency selector (EUR / USD / GBP).
Business (Online Ordering): Restaurant name and Address text fields. They are cosmetic in the preview, but they are persisted into a shared link (see Save & Share).
Other (Online Ordering): a Currency selector (EUR / USD / GBP).
A Desktop/Mobile device-frame toggle sits above the preview pane in Online Ordering (on an actual phone-sized viewport the storefront is rendered directly instead).
Reloading defaults is available via a Reset to fetched branding button, which discards changes and reloads the preview-merchant's original branding.

The Menu section lets a merchant preview their own menu content instead of the seeded dummy menu:

Template: downloads a sample menu-template.json showing the expected schema.
Export current: downloads the menu currently loaded in the preview (the seeded menu, or a previously uploaded one) as JSON in the same schema.
Upload JSON: uploads a .json file; on parse/shape failure it shows an inline error ("Invalid menu JSON: …") without applying the change.

The upload schema is a simplified, friendly JSON shape (converted internally to the app's real display-group/item/variant/modifier structures):

json

{
  "menu": [
    {
      "name": "Burgers",
      "description": "Hand-pressed, never frozen",
      "items": [
        {
          "name": "Cheeseburger",
          "description": "Beef, cheddar, pickles, ketchup",
          "price": 9.0,
          "tag": "Popular",
          "image": "https://example.com/cheeseburger.jpg",
          "variants": [
            { "name": "Single", "price": 9.0 },
            { "name": "Double", "price": 11.5 }
          ],
          "modifiers": [
            {
              "name": "Add-ons",
              "required": false,
              "multiple": true,
              "max": 3,
              "options": [
                { "name": "Extra cheese", "price": 1.0 },
                { "name": "Bacon", "price": 1.5 }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Top-level menu is required and must be a non-empty array of groups (categories).
Each group needs name (and optional description) plus an items array.
Each item needs name and price (decimal, e.g. 9.0 for €9.00); description, tag, and image (a URL) are optional.
An item can define variants (each with name + price) instead of a flat price, and/or modifiers (each with name, required, multiple, max, and an options array of {name, price}).
This uploaded menu is preview-only and is never written back to the merchant's real menus.

The Save & copy link button POSTs the current state to POST /branding-preview/configs and returns a short id. The payload differs per app: kiosk saves {branding, columns, currency, menu}; online ordering saves {branding, name, address, currency, menu} — i.e. the Restaurant name and Address travel with the link, and columns is kiosk-only. The studio then builds a shareable URL of the form .../branding-preview?config={id} and copies it to the clipboard. Opening that URL reloads the same branding, layout, and custom menu via GET /branding-preview/configs/{id} (a public, unauthenticated read).
Saving is capped at 2 MB of JSON (strlen(json_encode($config)) > 2_000_000 → HTTP 422, "Config too large (max 2MB)."). Since the logo and banner are embedded as base64 data URLs, they are usually what pushes a config over the limit. On failure, the studio shows the backend's error message plus a size breakdown (e.g. "icon 1.20 MB, banner 0.85 MB, rest 12 KB (total 2.05 MB)") so the merchant knows what to shrink.
A saved config is looked up by id; an unknown/expired id returns HTTP 404 ("Preview config not found.").

Business Rules & Edge Cases

A branding profile cannot be deleted while it is assigned to one or more locations.
Every location must have a branding profile assigned — branding_profile_id is required when creating a location, and a location can have only one branding profile.
One profile can be marked as the merchant default.
A profile that has not been fully configured is flagged incomplete in the list with a warning icon.
Changes to a branding profile affect:
- Kiosk: after app reload or sync
- Online Ordering: on next page load

Customer Impact

Branding profiles affect:

Kiosk: Theme, colors, logo, banner display
Online Ordering: Logo, favicon, banner, fonts, colors, promo-code styling
Receipts: Logo (uses the receipt logo if uploaded, otherwise the main logo)
Apple Wallet: Member-card colors, logo, program name, and strip image

FAQs / Typical Questions

"How do I change the logo on my kiosk?"
"Where can I change my online ordering colors?"
"Can I set different branding per location?"
"Why can't I delete a branding profile?"
"How do I add my Instagram link to a branding profile?"
"Why do I have to pick a branding profile when adding a location?"
"How can I preview my branding changes before saving them?"
"Is there a way to test colors/fonts without editing my real branding profile?"
"Can I preview my own menu before publishing it?"
"How do I share a branding preview with someone else?"
"Why did my branding preview link fail to save?"

Troubleshooting

Logo not showing on kiosk → Refresh or restart the kiosk app to sync changes.
Colors not updating on online ordering → Reload the page (changes apply on next page load).
Can't delete branding profile → Unassign it from all locations (or delete those locations) first.
Profile shows an "incomplete" warning → Open the profile and complete the required fields (logo, banner, favicon, fonts, colors).
Can't save the profile → Logo, banner and favicon are required; all theme and promo colors are required.
"Config too large (max 2MB)" when saving a preview share link → The uploaded logo/banner (stored as base64 in the preview config) is too big; use a smaller image, or check the size breakdown shown next to the error.
"Preview config not found" when opening a shared preview link → The link's id doesn't match any saved config (typo, or the config was never successfully saved).
Invalid menu JSON error when uploading a menu to the Branding Studio → The uploaded file isn't valid JSON or is missing/misshapen the top-level menu array; download the Template from the Menu section for a working example.

Assistant Guidance

When answering questions about branding:

Use clear navigation: e.g. "Go to Settings → Brand."
Prefer short, step-by-step instructions.
Mention which channels are affected (Kiosk, Online Ordering, Receipts, Apple Wallet).
Remember a profile cannot be deleted while assigned to locations, and every location must have a profile.
If a user is confused by changes not showing, ask:
- On which channel they expect the change.
- When they last reloaded the page or restarted the kiosk app.
If a merchant wants to "try out" or "test" colors, fonts, a logo, or a menu without committing changes, point them to the Branding Studio — titled "Kiosk Branding Studio" on the kiosk — at /branding-preview on the Kiosk or Online Ordering app itself (not a backoffice page), rather than telling them to edit a real branding profile. Do not call it a "Branding & Menu Preview Studio"; that name appears nowhere in the product.
Be clear that the studio previews against a dummy "preview merchant" dataset and does not read or write the merchant's real branding profile or menus — nothing there is saved permanently unless they explicitly click Save & copy link, and even that only creates a shareable preview config (max 2 MB), not a real profile.

Branding Profiles

Overview

Purpose

Key Concepts

Route

Actions

Create New Branding Profile

Edit Branding Profile

Set as Default

Delete Branding Profile

Profile Sections

General

Logos & Banner

Fonts & Colors

Apple Wallet

Field Constraints

Available Fonts

Branding Studio (`/branding-preview`)

Studio Controls

Custom Menu Upload

Business Rules & Edge Cases

Customer Impact

FAQs / Typical Questions

Troubleshooting

Assistant Guidance

Relations

Depends On

Affects

Branding Profiles ​

Overview ​

Purpose ​

Key Concepts ​

Route ​

Actions ​

Create New Branding Profile ​

Edit Branding Profile ​

Set as Default ​

Delete Branding Profile ​

Profile Sections ​

General ​

Logos & Banner ​

Fonts & Colors ​

Promo Codes ​

Social Links ​

Apple Wallet ​

Field Constraints ​

Available Fonts ​

Branding Studio (/branding-preview) ​

Studio Controls ​

Custom Menu Upload ​

Save & Share ​

Business Rules & Edge Cases ​

Customer Impact ​

FAQs / Typical Questions ​

Troubleshooting ​

Assistant Guidance ​

Relations ​

Depends On ​

Affects ​

Branding Profiles

Overview

Purpose

Key Concepts

Route

Actions

Create New Branding Profile

Edit Branding Profile

Set as Default

Delete Branding Profile

Profile Sections

General

Logos & Banner

Fonts & Colors

Promo Codes

Social Links

Apple Wallet

Field Constraints

Available Fonts

Branding Studio (`/branding-preview`)

Studio Controls

Custom Menu Upload

Save & Share

Business Rules & Edge Cases

Customer Impact

FAQs / Typical Questions

Troubleshooting

Assistant Guidance

Relations

Depends On

Affects