Make your website, app and kiosk match your brand
Your online ordering website, your branded mobile app and your self-service kiosks all take their look from the same branding settings in Back Office. Set your logo, colours and font once and they carry across every place your customers order.
Where to find your branding settings
- Sign in to Back Office at Company level (no store selected in the store switcher at the top of the page).
- Go to Setup > Online Ordering > Website & App > Settings.
- The Design & Branding section is at the top of the page. Kiosk welcome images are in the Kiosk section just below it.
- Make your changes, then click Save Changes (top right).
Can't see Website & App > Settings? It only appears at Company level. Clear the store from the store switcher and the menu will show.
What each setting changes
| Setting | Website | Mobile app | Kiosk |
|---|---|---|---|
| Header Logo | Top of every page | Top of the app and the loading screen | Not used |
| Homepage Image | Large photo on the homepage | Not used | Not used |
| Brand Colours: Primary | Buttons, links, basket and checkout | Buttons, headers and highlights | Buttons and highlights on every screen |
| Brand Colours: Secondary and Accent | Not used | A few text styles and basket buttons | Small details, such as the welcome screen tint |
| Brand Font | Headings and text | Headings and text | Not used. Kiosks always use Inter, chosen for reading at a distance |
| Favicon | Browser tab and Google results | Not used | Not used |
| Company Logo | Not used | Not used | With white-label branding, removes "Powered by MyFoodFast" from the welcome screen |
| Kiosk: Welcome Images | Not used | Not used | The welcome screen photo or slideshow |
The Company Logo is also shown on your Kitchen Display and Collection Display screens when white-label branding is on. See Show your own company logo on the Kitchen Display.
Images
- Header Logo: a
.pngwith a transparent background looks best. Around 200 × 60 pixels, or larger at the same proportions. - Homepage Image: an appetising photo of your food or your shop, at least 1200 × 600 pixels so it stays sharp on big screens.
- Kiosk Welcome Images: add one image, or several to run as a slideshow, and set how long each one shows with Slideshow Interval. Use clear, high-quality photos.
- Favicon: a simple square version of your logo. See Set your favicon.
Brand colours
There are three colour fields: Primary, Secondary and Accent. Click the swatch to pick a
colour, or type your exact brand colour as a hex code (for example #1E4D2B).
- Primary is the colour your customers see most, on your website, app and kiosk. Set this to your main brand colour.
- Secondary and Accent only appear in a few smaller places in the app and kiosk, and not on the website. Pick colours that sit well next to your Primary colour.
If a brand colour is very light (such as pale yellow), your website, app and kiosk automatically use a slightly darker shade of it wherever text sits on top, so the text stays readable. This is normal and keeps everything accessible.
Brand font
Choose from 10 font pairings for your website and app. See Choosing a brand font for your website.
When your changes show
- Website: as soon as you save. Do a hard refresh (Ctrl+F5 on Windows, Cmd+Shift+R on a Mac) if your browser shows an older copy.
- Mobile app: the next time a customer opens the app. A new brand font can take one more restart to appear, because the app downloads it in the background the first time.
- Kiosk: when the kiosk app next starts. To see changes straight away, close and reopen the kiosk app.
Your app's name, icon and store listing
The app's name, the icon on your customers' phones and your App Store and Google Play listing are set when our team builds your app, not from these settings. To change them, email help@myfoodfast.com. To get an app in the first place, see I want the Ordering App for my customers.
Other ways to make your site feel like yours
- Your own web address. Run the site on your own domain, such as
order.yourrestaurant.co.uk, instead of a MyFoodFast address. See Run your website on your own domain. - Restaurant name, page title and description. In the Restaurant Info & SEO section of the same Settings page, set the name customers see and how your site appears in Google. See Getting your website found on Google.
- A message or announcement. Show a banner message on your website and app. See How to add a message on my website and app.
- Footer content. Add or remove footer text and social links. See How do I add or remove Footer content?.
If you run more than one brand
Each brand has its own website and app look. If you use Virtual Brands, a Virtual Brand selector appears at the top of the Settings page. Choose the brand first, then set its logo, images, colours, font and favicon, and save. Repeat for each brand. See Running more than one brand or website from one account.
Kiosks always use the colours of your main (default) brand, so set those first.
What can't be changed
The layout of the website, app and kiosk is the same for every restaurant, so they stay fast, work well on every screen and get new features automatically. That means:
- You can't add your own CSS, rearrange the page layout or move sections around.
- You can't upload your own font file. Pick the closest of the 10 font pairings.
If there's something about your branding you'd like to change and can't, email help@myfoodfast.com and tell us what you're after. We use these requests to decide what to add next.
Troubleshooting
- I saved but my website looks the same. Do a hard refresh, or open your site in a private window.
- My kiosk still shows the old colours. Close and reopen the kiosk app. If you run virtual brands, check you changed the colours on your main (default) brand.
- My app still shows the old font. Close and reopen the app once more. The new font downloads the first time and shows from the next start.
- Only one of my brands changed. Settings are per brand. Switch brand with the Virtual Brand selector at the top of the page and set it again.
- My logo looks blurry. The image is too small. Upload a larger version with the same proportions.
- My logo has a white box around it. Upload a
.pngwith a transparent background instead of a.jpg. - The favicon in Google is still the old one. Google updates favicons on its own schedule. See Set your favicon.