Restaurant Website Template - WhatsApp Ordering

Most small restaurants do not need an ordering system with monthly fees. They need a page that looks good on a phone and sends orders somewhere they already work: WhatsApp.

This is a complete single-page restaurant website. Customers browse the menu, tap Add on the dishes they want, review the order, choose delivery or pickup, then send it. WhatsApp opens with the whole order written out: items, quantities, total, name and address. The owner simply replies.

Everything the owner edits lives in one place. A single settings block at the top of one file holds the restaurant name, WhatsApp number, colours, fonts, the full menu with prices and photos, opening hours, the map and every button label. No build tools, no frameworks, no npm install, no database. Upload three files to any host and it runs.

Built properly, not just styled. Mobile first and tested from small phones to wide desktops. Keyboard accessible with visible focus, a skip link and support for reduced motion. Three files total, so pages load fast. A customer's basket survives a page refresh. Every visible word is translatable from the settings block, so the site works in any language.

Full documentation is included as an HTML page covering every setting, with a troubleshooting section.

Features

Orders sent straight to WhatsApp, with no backend, database or monthly service One settings block controls the name, colours, fonts, menu, hours and labels Menu grid with categories, prices, dish photos and veg, spicy and popular tags Order panel with quantities, running total, delivery or pickup, and address checking Basket remembered in the customer's browser until it is sent or cleared Opening hours with a live Open now badge that respects your time zone Photo gallery with lightbox, Google Maps embed and a directions link Floating WhatsApp button for general enquiries Mobile first, keyboard accessible, reduced motion supported Plain HTML, CSS and JavaScript: no frameworks, no build step Every label translatable, so the site works in any language Full HTML documentation included

Requirements

A text editor. Notepad works; VS Code is nicer. Any web host that serves static files. No PHP, database or Node required. A WhatsApp or WhatsApp Business account to receive orders. A current browser: Chrome, Safari, Firefox or Edge.

Instructions

1. Unzip the download.

2. Open template/script.js in a text editor.

3. Edit the settings in the CONFIG block at the top: restaurant name, WhatsApp number, menu, hours, colours.

4. Replace every value marked PLACEHOLDER. The WhatsApp number matters most, since orders go nowhere until it is set.

5. Save the file.

6. Upload the three files inside template/ to your web host.

Full instructions for every setting, with troubleshooting, are in documentation/index.html.