Back to Menu appearance and custom CSS

Menu appearance: choose and customise your menu page

What Menu appearance does

Menu appearance controls how the page looks that customers open when they scan your QR code or open your menu link. You choose a template, set its colours, fonts and layout, add pictures, tell customers about your place (links, WiFi, opening hours) and arrange tabs such as Food and Drinks.

Your menu itself (categories, dishes, prices) does not change. This is only the look of the page.

Everything you do is saved as a draft. Customers see nothing new until you press Publish.

Plan: Menu appearance is the paid feature Menu Templates. Writing your own CSS is a separate paid feature, Menu Custom CSS (it also needs Menu Templates), and has its own article: Custom CSS for your menu page. Only a company administrator can open the page.


Where to find it

Open Menu & tables → Menu appearance in the admin menu. If you do not see it, your plan does not include Menu Templates, or you are not a company administrator.

The page has six tabs on the left: Template, Settings, Images, Venue profile, Menu tabs and Custom CSS. On the right is a preview of your menu page in a phone frame. At the top are the buttons Export theme, Import theme, Reset to default, Discard changes and Publish.


Draft and publish: what customers see and when

  • Autosave. A moment after you stop typing or clicking, the draft is saved by itself. The line above the tabs tells you what is happening: Unsaved changes…, Saving…, Draft saved or Everything is saved. Without a connection it says No connection: the changes will be saved when it is back.
  • Fields to fix. If something cannot be saved, the status says Not saved: some fields need fixing and the tab gets a red dot. Fix the highlighted fields; you cannot publish until then.
  • Publish. Press Publish and confirm. Customers see the new look the next time they open the menu page. The label Unpublished changes stays next to the buttons while your draft differs from what customers see.
  • Discard changes. The draft goes back to what is published (or to the default look if nothing was ever published). Your unpublished changes are lost.
  • Reset to default. This removes both the draft and what is published. The menu page goes back to the default Classic look, with no profile, links or tabs. It cannot be undone.
  • Two people editing. If another administrator changed the settings while you were working, you see Not saved: the settings were changed elsewhere. Press Reload the latest version and make your change again.

Tip: Work on the draft as long as you like, look at the preview, and publish only when you are happy. Nothing you do before Publish reaches customers.


Step 1: Choose a template

In the Template tab you pick the layout of the page. The one in use is marked Current.

  • Classic: the familiar menu. A header in your colour, a row of categories and a simple list of dishes.
  • Hero: a cover photo with your logo, links and information, a search field, category pills that follow the scroll and a floating bar at the bottom with tabs such as Food and Drinks. Hero always uses a light palette, whatever the customer's device theme.

When you switch templates your colours and texts are kept. Some things belong to one template only: the Venue profile and the Menu tabs are shown by Hero. If you go back to Classic they are kept, not deleted, and appear again when you choose Hero.


Step 2: Settings

The Settings tab is built from the template you chose, so Classic offers fewer options than Hero. Anything you leave alone follows the template. The button Use the template's value takes a change back.

  • Colours: Main colour, Accent colour, Page background, Cards and panels and Text colour. Type a code such as #1d4ed8 or pick a colour. Next to each colour a note tells you how readable the text on it is (Easy to read, Readable for large text or Hard to read). In Classic the only colour is the main colour; it paints the header and follows the brand colour from your company settings until you choose another one.
  • Fonts: Heading font and Body font, from eight fonts that come with BletaGo: Inter, Poppins, Montserrat, Playfair Display, Lora, DM Sans, Oswald and Roboto. You cannot upload your own font.
  • Shape: Corner roundness, from Square to Fully rounded.
  • Layout: Dish layout (List, Grid or Compact), Category navigation (Pills or Tabs), Header (Plain or Cover photo) and Sections under the header. In the last one, drag to change the order and untick a section to hide it.
  • Sections and features: switches for Search field, Profile links, Info chips, Bottom tab bar, Dish photos and Allergen information.
  • Pictures: Cover photo and Page background picture, chosen from the pictures in the Images tab.

Step 3: Images

The Images tab is your picture library for this page. Customers never see the library itself, only the places where you use a picture.

  • Up to 20 pictures, each up to 5 MB, in JPG, PNG, GIF or WebP.
  • Drop files on the box or press Choose pictures. Each picture gets a name from its file name; you can change it before uploading. A name uses lowercase letters, numbers and dashes (up to 41 characters), for example terrace.
  • A picture is used as the cover photo or the page background (chosen in Settings → Pictures), or in your custom CSS. The card of each picture says where it is used.
  • A picture that the page or its CSS still uses cannot be deleted. Remove it from the setting first.
  • Copy CSS variable copies var(--asset-name) for a developer to use in custom CSS.

Step 4: Venue profile

The Venue profile tab tells customers about your place. The Hero template shows it in the header; Classic does not (the content is kept for later).

  • Tagline: one short line under the name, up to 200 characters. Write it once per menu language.
  • Links (up to 12): Facebook, Instagram, TikTok, X, YouTube, WhatsApp, Telegram, LinkedIn, Google reviews, website, map, phone and email. Choose the kind, then enter the address (a full web address starting with https://, a phone number such as +355 69 123 4567, or an email address). The optional Text replaces the name of the link.
  • Info chips (up to 6): small facts customers like to see, such as the WiFi password or where to park. Each has an icon, a label and a value. Tick Customers can tap to copy the value for things like a WiFi password.
  • Opening hours: tick Show opening hours, then set when you open and close, Monday first, or mark a day Closed. Copy Monday to all days saves time.

Texts such as the tagline and the chip labels are written per language of your menu. Fill them in for every language you offer; a language that is turned off is not saved, and the editor tells you if you typed text in one.


Step 5: Menu tabs (Food, Drinks and more)

With the Hero template the page has a bar at the bottom. All is always there, then your own tabs, then Order (when ordering is on) with the number of dishes in the order. In the Menu tabs tab you create the tabs in the middle.

  1. Press Add a tab (up to 8 tabs).
  2. Give it a Name in each menu language and choose an Icon.
  3. Tick the categories in this tab. A category can be in several tabs.
  4. Drag the tabs to set their order.

Good to know:

  • A tab only chooses which categories to show. The order of dishes stays as in your menu.
  • A tab with no categories is hidden from customers.
  • The Key is a short word (letters, numbers and dashes) that a developer can use to style the tab. It follows the name until you set your own, so you can leave it alone.
  • New categories you add to the menu later appear only under All until you put them into a tab. The tab shows Categories in no tab: N to remind you. If you tick Also show categories that are in no tab on a tab, new categories appear there by themselves.
  • If you delete a category from the menu, the tab warns you (Deleted categories still listed here). Press Remove them; the page cannot be saved until you do.

To add or rename categories, see Creating and organising menu categories and dishes.


Preview: see it before customers do

On the right is your real menu page in a phone frame. It shows the draft, not what is published, and it reloads after every save. A ribbon at the top reminds you that it is a preview and that ordering is switched off.

  • Reload and Open in a new tab are above the frame. If you have several branches, Branch shown chooses whose menu to preview.
  • Copy preview link gives you an address you can open on a real phone or send to someone. The link shows your unpublished draft to anyone who has it, so share it only with people you trust.
  • The link stops working after 7 days.
  • New preview link makes every link you shared stop working and gives you a fresh one. Use it if a link went to the wrong person.

Tip: Open the preview link on your own phone and scroll the whole menu, in each language you offer. Long dish names and a slow connection show problems the editor cannot.


Export and import a theme

Export theme downloads a small file with your look: template, settings (without the picture settings), venue profile, tabs (without their categories) and custom CSS. Keep it as a backup, or use it to copy a look to another branch or company.

Import theme reads such a file. You are asked to confirm, because it replaces the look in your draft. Your pictures and the choice of categories in each tab are kept. Things that do not fit (for example custom CSS when your plan does not include it, or entries beyond the limits) are left out, and a message tells you. After an import, check the preview and press Publish.


If your plan lapses

If Menu Templates is no longer part of your plan, customers see the default look: the Classic page with your brand colour and logo from the company settings. Nothing you made is deleted, but the editor is locked until the feature is back.

If only Menu Custom CSS lapses, your template and settings stay and only the custom CSS stops being applied.


Tips for a menu that looks good

  • Contrast first. Light text on a light colour is hard to read on a phone in the sun. Aim for Easy to read next to every colour.
  • Cover photo. Use a landscape picture, at least about 1200 pixels wide and well under 5 MB. The photo is cropped to the middle of the header, so keep the important part in the centre and do not put text in the picture; the logo and the name are written over it.
  • Keep it light. Large files make the page slower on mobile data. If a picture is much bigger than it needs to be, shrink it before you upload.
  • Fill in every language. Taglines, chip labels and tab names are written per language, so fill them in for each language you offer.
  • Few tabs. Two to four tabs fit comfortably on a phone. Short names work best.
  • Look at the live page once. The preview has ordering switched off. After you publish, open the real menu on a phone and check that it looks as you expect; only the look changes, ordering works as before.