Digital QR Menu for Restaurants — Build an Accessible, Updatable Menu in 30 Minutes

You just updated your menu prices, but the old paper versions are still on the tables. Or you've run out of tuna and need to communicate it to every table in real time. A digital QR code menu isn't a fad: it's a tool that solves these problems every night. We at Meteora Web have helped dozens of restaurants switch from printed PDFs to a living menu that can be updated in seconds. In this guide we show you how to build one from scratch without spending hundreds of euros a month on unnecessary subscriptions.

Which format should you choose for your digital QR menu?

Your first decision determines everything. A digital menu can be a PDF, a link to Google Docs, an HTML page, or a dedicated app. Each format has pros and cons, but for most restaurants the most practical solution is a lightweight HTML page hosted on a domain you already own or on a static cloud storage service.

Avoid PDFs

A PDF is static: to update it you have to edit the file, convert it, upload it, and reprint the QR code. On smartphones, PDFs often don't fit the screen: the customer has to zoom, gets frustrated, gives up. We advise against PDFs for daily use.

Google Docs, Sheets or Airtable

A shared spreadsheet is a bit more alive: edit a cell and the menu changes. But the layout is a spreadsheet, not a menu designed to sell. Plus you need to manage public access and formatting. It's a quick hack, not a professional solution.

Static HTML page: our recommendation

Create an HTML page with essential CSS. Upload it to a server or to Google Cloud Storage (as we explained in this guide). All you need is a text editor, no database. Update the file whenever needed. The QR code stays the same. It's fast, secure, and costs nothing if you already pay €5/month for hosting.

How to structure the menu content to maximize sales?

A digital menu is not a recipe book. It's a sales tool. We, who have managed accounting and inventory, know that the placement of dishes affects your margin. Here's what works:

Visual hierarchy of sections

Start with appetizers, pastas, main courses, desserts. But put your daily specials or highest-margin dishes at the top. Use a background color or an icon to draw the eye. On mobile, the first section visible is the one that counts.

Short, sensory descriptions

Don't write anonymous lists. Write "Creamy risotto with Gorgonzola and caramelized walnuts" instead of "Risotto with Gorgonzola". Words evoke experience and increase average order value.

Allergens and icons

Include standard icons (gluten-free, lactose-free, vegan) next to each dish. This is legally required in many countries and reduces waiter questions. You can do it with simple span and CSS classes.

How to host the digital menu without spending a fortune?

The most solid solution for an Italian restaurant is to use an existing shared hosting (the one for your restaurant website) or leverage Google Cloud Storage or Netlify for free hosting (up to a certain traffic). We recommend cloud storage because it's designed for static files: low latency, no server management, scalable.

Steps to upload on Google Cloud Storage

• Create a bucket named something like restaurant-menu
• Set public read access (careful with permissions)
• Upload your index.html and assets (images, CSS)
• Activate CDN for faster distribution
• Get the public URL, shorten it with a custom redirect (e.g., yourdomain.com/menu)

Alternatively, if you already use WordPress, you can create a page with a lightweight theme. But here we talk about backend-free solutions.

How to generate and place the QR code?

The QR code is the bridge between the table and the menu. You need to generate a code that points to your URL. Use a reliable generator (e.g. QR Code Generator or Google Charts API).

Characteristics of an effective QR code

• High resolution: at least 600x600 pixels for printing
• Dark color on light background (contrast is necessary for scanning)
• Minimum 4 modules margin to avoid scanning errors
• Descriptive text below: "Scan to view the menu"

Where to place QR codes in the dining room

• Placemats or table centerpieces (protected with clear plastic)
• Table stands (acrylic holders)
• At the entrance, for waiting guests
• On the paper menu itself (as an alternative)

Always test the scan: distance, lighting, angle. A small or glossy QR code becomes useless.

How to update the menu without stress?

The beauty of a digital menu is that you can modify everything in real time. With a static HTML page, updating is simple:

1. Open the HTML file on any editor (even on your phone with an app)
2. Change prices, descriptions, or remove dishes
3. Save and upload to the server (via FTP or web interface)
4. The already printed QR code continues to work

For restaurants that change menus frequently (seasonal, daily), we recommend using a Google Sheet connected to a simple JavaScript script that generates the HTML on the fly. We built for a client a system that every day loads the menu from Google Sheets: zero manual operations.

Practical example of a minimal HTML menu

Here is a base template you can customize. Copy, paste, and replace your data.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Restaurant Menu</title>
  <style>
    body { font-family: 'Segoe UI', sans-serif; max-width: 600px; margin: auto; padding: 20px; background: #fff8f0; }
    h1 { color: #6b3a2a; }
    .section { margin: 30px 0; }
    .section h2 { border-bottom: 2px solid #d4a373; padding-bottom: 5px; }
    .item { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; }
    .item-name { font-weight: bold; flex: 1; }
    .item-price { color: #6b3a2a; margin-left: 10px; }
    .item-desc { font-size: 0.9em; color: #555; }
    .icon { margin-right: 5px; }
  </style>
</head>
<body>
  <h1>Trattoria da Mario</h1>
  <p>Welcome! Today's menu.</p>

  <div class="section">
    <h2>Starters</h2>
    <div class="item">
      <div><span class="item-name">Tomato bruschetta</span><br><span class="item-desc">Fresh tomato, basil, extra virgin olive oil</span></div>
      <span class="item-price">€8</span>
    </div>
    <div class="item">
      <div><span class="item-name">Mixed house antipasto</span><br><span class="item-desc">Cured meats, cheeses, grilled vegetables</span></div>
      <span class="item-price">€15</span>
    </div>
  </div>

  <div class="section">
    <h2>Pasta</h2>
    <div class="item">
      <div><span class="item-name">Spaghetti carbonara</span><br><span class="item-desc">Guanciale, pecorino, egg, pepper</span></div>
      <span class="item-price">€12</span>
    </div>
  </div>

  <p style="text-align:center; margin-top:50px; font-size:0.8em;">Digital menu updated on 01/10/2025. <br>For allergens, please ask staff.</p>
</body>
</html>

With this template you have a readable, mobile-friendly, editable menu. You can add images, icons, and a footer with your details.

What to do now

1. Choose the format: go with static HTML. It's the most flexible and durable way.
2. Create your HTML file starting from the template above. Customize the restaurant name, sections and dishes.
3. Upload the file to a hosting or cloud storage. If you don't have one, create a free bucket on Google Cloud Storage (up to 5GB).
4. Get the public URL, then generate a QR code with your preferred generator. Print the code on stickers or table cards.
5. Test the scan from different phones and lighting conditions. Adjust if needed.
6. Update the menu whenever prices or dishes change. No need to reprint anything.

If you prefer a ready-made solution that also includes reservation management, check out our complete digital QR menu guide where we cover integration with ordering systems.