Design your public ordering website

1. Design your public ordering website

   The builder for the website guests see and order from: pick a theme, colours and fonts, then add and arrange sections on the live preview or in the side panel. Most edits wait for Save, but launch themes, page templates, design sets, image uploads and the SEO and PWA boxes are saved at once.

2. Preview controls

   Switch the preview between desktop (1280px) and mobile (390px), reload it with the refresh button, or use Open storefront to see the live site in a new tab.

3. Save and history

   Save publishes your design; a dot on the button marks unsaved changes. Undo and Redo step through your edits (Ctrl/Cmd+Z), and the revert button, after you confirm, goes back to the previously saved design.

4. Edit on the live preview

   Click a section in the preview to open its settings, edit texts right on the page, and use the section controls to move, hide or delete it, or + to insert a new one. Guests see nothing until you save.

5. Design sets

   Save the current design as a named set, or apply or delete a saved one, so you can switch between looks such as a seasonal design.

6. Launch themes

   Ready-made looks such as Pizzeria, Burger or Café & Breakfast. Applying one changes the colours, font, corner radius and colour mode straight away, without Save; the revert button brings back the previous theme.

7. Page templates

   Replaces all your sections with a ready-made layout filled with default content. It is applied straight away and opens the Sections tab, so pick a template before you customise sections.

8. Colours

   Primary and accent colours for buttons and highlights, plus the background, surface, text and line colours of the current colour mode. Primary and accent must be valid hex colours to save.

9. Layout and typography

   Choose the layout style, font, corner radius, light or dark colour mode, button style and layout mode for the whole site.

10. Brand

    Restaurant name, short description, phone and e-mail shown on the site, plus your logo, dark logo and favicons. Images are uploaded as soon as you choose them.

11. Publishing options

    The Storefront enabled switch and, when your plan allows it, Hide platform branding. Both take effect when you save.

12. Sections

    Every section of your home page, with the count against your limit. Drag to reorder, click a name to edit it, use the eye to hide it or the bin to remove it.

13. Add a section

    Choose a section type such as Hero, Featured Dishes, Gallery, Hours & Location, FAQ or Free layout (composer). The new section is added at the end of the page.

14. Section settings

    Everything about the selected section: its content, items, images and style. The switch at the top shows or hides the section, and the back arrow returns to the section list.

15. Announcement bar

    A thin bar at the top of the site for news or offers. Set its text in each language, a link, the background colour and whether guests can dismiss it.

16. Header

    Header layout, logo alignment, menu style and content, a sticky header, the menu links and a call-to-action button with its own label and link.

17. Footer

    Footer layout, about text, link columns, social links, payment icons and the copyright line.

18. Banners

    Up to 12 image banners, each with an image, a link and alt text. Reorder them with the arrows or remove one with the bin.

19. SEO

    The page title, meta description and share image used in search results and when the site is shared, plus an option to hide it from search engines. This box has its own Save SEO button.

20. Home screen app

    How the site behaves when guests add it to their home screen: app name, short name, theme and background colours, and launch mode. The icon uses your logo. Save it with Save PWA.

21. Designer tabs

    Theme, Sections, Header & Footer, Banners and SEO. Each tab changes the settings panel; start this tour again on any tab to have its settings explained.