Overview

QuickMunch is a complete HTML template for a food ordering and delivery business — the public storefront customers order from, the account area they manage their orders in, and two full back-office dashboards.

Every page is static HTML. There is no build step, no package manager and no server-side language: open a file in a browser and it works. All content is written into the markup, so changing a price, a dish or a chart means editing HTML rather than wiring up a database.

What it covers

• Restaurant discovery — browse, filter, search, cuisine pages and a map-based location finder
• Ordering — menus with item options, cart, checkout, order tracking and per-order reviews
• Table service — reservations, a QR table-ordering page and a self-order kiosk screen
• Customer account — orders, favourites, addresses, payment methods, loyalty and notifications
• Admin dashboard — restaurants, orders, users, analytics, monetisation, content and settings
• Restaurant dashboard — menu, inventory, POS, kitchen display, devices, staff, payouts and analytics
• Design studio — TV menu boards, QR cards, printable menus and receipt layouts, each with a live preview

Getting started

Nothing needs installing. Pick whichever of the two suits you.

1. Open it directly

Unzip the package and double-click index.html. Every page, menu, chart and map works straight from the file system in Chrome, Firefox, Edge and Safari.

2. Put it on a server

Upload the whole folder to any web host over FTP or your control panel's file manager. There is no PHP, no database and no configuration file — the folder is the site. Any static host works, including GitHub Pages, Netlify and Cloudflare Pages.

3. Make it yours

1. Set your brand colour — see Colours & branding.
2. Replace assets/images/logo.webp and assets/images/logo-light.webp.
3. Edit page text directly in the HTML.
4. Swap the photography in assets/images/ for your own.

Any code editor will do. VS Code with the Live Server extension gives you automatic reloading while you edit.

File structure

Storefront and account pages sit at the root. Everything else is grouped in two folders.

quickmunch/
├── index.html                  Homepage (marketplace layout)
├── *.html                      Storefront pages - 33 in total
├── client-*.html               Customer account pages - 13 in total
│
├── dashboard/
│   ├── admin/                  Platform administration - 83 pages
│   │   └── previews/           Live design-studio previews
│   └── restaurant/             Restaurant back office - 69 pages
│       └── previews/           Live design-studio previews
│
├── assets/
│   ├── css/                    26 stylesheets, 10 of them RTL builds
│   ├── icon-fonts/             Font Awesome, stylesheet and faces
│   ├── images/                 1,290 images
│   ├── js/                     88 modules, one per feature
│   ├── libs/                   25 third-party libraries, one folder each
│   ├── fonts/                  17 self-hosted font files
│   └── video/                  7 clips
│
└── documentation/              This file

Stylesheets

app.css is the readable source and app.min.css is what the pages load. Edit the source and minify it into place — or edit the minified file directly if you are only changing a value or two.

Storefront pages

Six homepage layouts are included. Point your domain at whichever you prefer by renaming it to index.html.

Customer account

Thirteen pages, all prefixed client- so they sort together and never collide with a storefront file name. client-account.html is the entry point.

Dashboards

Two complete back offices share one sidebar design. A switcher at the top of the sidebar moves between them, so both are reachable from any dashboard page. The same pair also appears in the storefront's mega menu.

Admin — dashboard/admin/

83 pages for whoever runs the platform, in thirteen sections: Operations, Analytics, Monetisation, Growth, Media, Content, Design templates, Communications, Blog, Appearance, Settings, Logs and System.

Restaurant — dashboard/restaurant/

69 pages for a venue owner, in nine sections: Operations, Menu, Media, Devices, Design & print, Finance, Analytics, Growth and Settings. The POS till, kitchen display, floor plan and device management live here.

One page per type, not per record

The template ships one representative page for each kind of detail screen rather than one per record — a single order detail, a single restaurant profile, a single menu-item form. Every list links to that representative, which keeps the package small and leaves you one file to restyle instead of dozens.

The screen editors are the exception. Each TV menu board under Design templates, and each screen under Devices, has its own editor page carrying that board’s own layout, so opening one from the gallery shows the columns, orientation and media it actually uses.

Design studio

The template galleries under Design templates and Design & print show live previews rather than screenshots: each thumbnail is a real page rendered in an iframe, so videos play and the slideshow board rotates through its slides. Those preview documents live in the previews/ folder beside each dashboard.

Colours & branding

The palette is built from a single value. Every other shade — hovers, tints, borders, gradients — is derived from it with CSS color-mix(), so changing one line recolours the entire template.

Each page carries the brand colour in a small block in its <head>:

<style>:root{--qm-primary: #ff003d;}</style>

Change that value to your own colour. To apply it everywhere at once, use your editor's find-and-replace across all .html files — the line is identical on every page.

Going further

assets/css/app.css defines 118 custom properties on :root. The ones worth knowing:

Logo

Replace assets/images/logo.webp and assets/images/logo-light.webp (the light version is used on the dark dashboard sidebar). Keep the same file names and no markup changes are needed. assets/images/favicon.png is the browser tab icon.

Editing content

All content is written into the HTML. There is nothing to import and no admin panel to log into — open the page and edit the text.

• Text, prices, dish names — edit the markup directly.
• Photography — replace files in assets/images/ keeping the same names, or point the src at your own.
• Header, mega menu and footer — these repeat on every page. Edit one page, then find-and-replace the block across the rest.
• Forms — every form is inert by design, so nothing submits or navigates away. Add your own action attribute, or wire the form to whatever service you use.

Charts

Analytics screens use ApexCharts. Each chart reads its configuration from a data-chart attribute on its own container, so the numbers sit in the HTML beside the chart rather than in a separate script.

<div class="qm-chart"
     data-chart='{"type":"area","height":260,
                  "colors":["#ff003d"],
                  "categories":["Mon","Tue","Wed","Thu","Fri"],
                  "series":[{"name":"Revenue","data":[420,510,470,660,720]}]}'>
</div>

Edit the series values to change what a chart shows. Charts that offer a period selector carry a second attribute, data-ranges, holding one dataset per period; assets/js/dashboard-charts.js swaps between them when a period is chosen.

Maps

Every map in the template — the location finder, contact page, delivery tracking and the dashboard maps — is drawn by one shared engine, assets/js/qm-map.js, built on Leaflet. The provider is chosen with a meta tag in the page head:

<meta name="qm-map-provider" content="osm">

The template ships with osm (OpenStreetMap), which needs no account and no API key. The engine also understands mapbox and google; both need a key of your own, added as <meta name="qm-map-key" content="…">.

Marker positions are written into the page. On the order tracking page, for instance, the destination and the rider sit in a small config block:

window.QM_MAP = { destLat:   40.748554, destLng:   -73.985663,
                  driverLat: 40.744900, driverLng: -73.990500 };

RTL & fonts

Right-to-left

Eleven mirrored stylesheets ship alongside the standard ones. To switch a page to RTL, set the direction on the <html> element and load the .rtl.css build in place of the default:

<html lang="ar" dir="rtl">
<link rel="stylesheet" href="assets/css/app.min.rtl.css">

Noto Sans Arabic is included and picked up automatically in RTL mode.

Typefaces

All fonts are self-hosted in assets/fonts/ — no external requests, and the template works offline. Poppins carries the interface; Anton, Bebas Neue, Bitter, Cinzel, Cormorant Garamond, EB Garamond, Oswald and Playfair Display are available for display headings and the printable menu designs.

To change the interface font, edit the @font-face blocks in assets/css/fonts.css and the font stack in assets/css/app.css.

Libraries

Everything below is bundled in the package. Nothing is fetched from a CDN, so the template runs offline and makes no third-party requests other than map tiles.

Photography is licensed for use within this template. Replace it with your own before launch if you would rather not ship the demo imagery.

Support

If something is not behaving as it should, or you would like a hand adapting a page, get in touch through our ThemeForest profile and include the page name along with a description of what you are seeing.

Thank you for choosing QuickMunch.