Put Your Restaurant Menu Online with a QR Code

Put Your Restaurant Menu Online Without Rebuilding Your Website

With a QR code menu, customers do not type a web address. Staff do not replace printed menus after every price change. The code itself is only a shortcut. What matters is the page or document that it opens. That page must load quickly and read well on a phone. It must also stay at the same address while the cards are on the tables.

This tutorial covers the whole path. You prepare the menu as a mobile-friendly PDF or a small static HTML page. Then you publish it at a stable URL. The main steps use Cloudflare Pages, and Netlify is an alternative. After that, you test the URL on real phones, create the QR code with a separate generator, and print and scan a sample. Later, you update prices behind the same link.

The process has six parts:

1. Prepare the menu for a small screen.
2. Publish it at a stable URL.
3. Test that URL on real phones.
4. Create the QR code with a separate tool.
5. Print and scan a sample card.
6. Update the menu later without a change to its link.

Choose PDF Menu Hosting or a Static HTML Menu

Pick the format that suits your customers and your update routine. A PDF is usually easier because most restaurants already have a print menu. Static HTML takes more work but gives a smoother phone experience.

Consideration	Mobile-Readable PDF	Static HTML Menu
Setup	Export and upload one file	Upload an HTML file plus its images and styles
Phone experience	Can need zooming if the design is poor	Can adapt to the width of any screen
Design control	Preserves the printed layout	Depends on browser and CSS rules
Updates	Replace the PDF at the existing link	Replace one or more site files
Search and copying	Works when text remains selectable	Usually easy to search and copy
Best fit	A short menu that changes occasionally	A longer menu or online price list with frequent changes

For many independent restaurants, PDF menu hosting is a practical starting point. Use a single-column layout. Keep the file small. A narrow two-page PDF is easier to read than a three-column dining-room menu that is squeezed onto a phone.

Choose static HTML when mobile navigation matters more than a match with the print design. With HTML, you can add section links for breakfast, drinks, desserts and dietary choices. The text also reflows to fit the screen, so customers do not pan sideways.

Neither format gives you ordering, payment, reservation or inventory functions. This guide covers publishing and sharing the menu, not restaurant commerce.

Prepare a Mobile-Friendly QR Code Menu

A menu can look perfect on a laptop and still fail at the table. Some customers use one hand, sit in dim light or have a slow connection. Design for that situation.

For a PDF, start with a narrow portrait page. Use live text instead of a photograph of the printed menu. Live text is real text, not a picture of text. It stays sharp when you enlarge it. Screen readers can read it, and customers can search it for a dish or an allergen.

Item	What to Look For	Why It Matters
Text size	Body text remains readable at normal phone width	Constant pinching and zooming make the menu tiring to use
Contrast	Dark text has a clear contrast with its background	Low light and screen glare can hide pale text
File size	Compress photos and keep the PDF small	Smaller files open faster on mobile data
Layout	Use one column or short, clearly separated sections	Wide columns force horizontal scrolling
Text layer	Customers can select dish names and prices	A scanned image is less accessible and harder to search
Information	Prices, descriptions, dietary notes and dates are current	A polished menu is still wrong if its information is stale

The Web Content Accessibility Guidelines (WCAG) set a contrast ratio of at least 4.5:1 for normal text at Level AA. The WCAG contrast guidance is for web pages, but the same target suits a digital menu.

For static HTML, set the viewport meta tag (it fits the page to the phone screen). Let the content reflow. Keep buttons and section links large enough to tap. WCAG 2.2 sets a minimum target size (the area that a finger taps) of 24 by 24 CSS pixels, with some exceptions. Its target-size guidance explains the details.

Include these items near the top or bottom of the menu:

• The restaurant name, address and telephone number
• Serving hours for the displayed menu
• Currency, and whether the prices include taxes or service charges
• A note that ingredients and availability can change
• Clear allergen guidance that tells guests to speak with staff
• A visible revision date, such as “Updated October 2026”

Publish the Menu at a Stable URL

Any static host can serve a PDF or a small HTML menu. The steps below use Cloudflare Pages. It accepts a folder that you drag into the browser, and it gives the project a fixed address. Later, you can replace the files, and the address stays the same. Netlify works in a similar way. This guide covers Netlify after the steps.

Start with a folder that holds only the live menu. Choose short, lowercase file names. Keep them forever, because they become part of the URL that you print:

menu-site/
  menu.pdf

For an HTML menu, the folder holds index.html plus its stylesheet, fonts and images. Keep the same relative locations that the files had in your test on your computer:

menu-site/
  index.html
  menu.css
  images/
    house-salad.webp

Then publish it with Cloudflare Pages direct upload:

1. Sign in to the Cloudflare dashboard. Open Workers & Pages.
2. Select Create application > Get started > Drag and drop your files.
3. Enter a project name. It becomes the address, for example harbor-cafe-menu.pages.dev. If another project already uses the name, Cloudflare adds a few random characters.
4. Drag the menu-site folder (or a ZIP of it) into the upload area. Select Deploy site.
5. Open the address in a private browser window: https://harbor-cafe-menu.pages.dev/menu.pdf for a PDF, or the root address for an HTML menu.

Drag-and-drop uploads accept up to 1,000 files and 25 MiB per file. That is far more than a menu needs.

Use your own domain if you have one

The safest address to print is one on the restaurant’s own domain, such as menu.harborcafe.com. If you change hosts later, you point that name at the new host. Every printed code then keeps working.

In the Pages project, open Custom domains. Select Set up a domain. For a subdomain like menu.harborcafe.com, your DNS can stay with your current provider. You add a CNAME record that points to harbor-cafe-menu.pages.dev. A CNAME record points one domain name to another. Add the domain in the Pages dashboard first. If you create the CNAME before that step, it can return an error. Cloudflare’s custom domain guide covers both subdomains and root domains.

Netlify as an alternative

Sign in to Netlify. Drag the same folder onto Netlify Drop. The menu gets an address such as harbor-cafe-menu.netlify.app. You can add a custom domain later. To update the menu, drag the new folder onto the dropzone at the bottom of the Deploys page. Netlify’s deploy documentation describes this step.

Keep a table menu public

Do not put an ordinary table menu behind a login, a password or an email form. Guests want to read and order. Every extra step makes some of them ask for a paper menu instead. Access control belongs to private material, such as a staff price list.

Test the Online Menu Before Creating Your QR Code Menu

Do not create or print a QR code immediately after the upload. Test the destination first. A QR image cannot fix an unreadable PDF, a missing stylesheet or a wrong address.

If possible, open the exact URL that you plan to encode on at least one iPhone and one Android phone. To test the URL over cellular data, turn off Wi-Fi once.

Test	What to Do	Pass Condition
First load	Open the link in a private browser tab	The menu opens without any login
Readability	Read the smallest description and price	Text is legible without repeated zooming
Navigation	Move between pages or HTML sections	The customer does not get lost or scroll sideways
Accuracy	Compare several dishes with the source menu	Names, prices and dietary marks match
Saving	Save or share the PDF from the phone’s browser	The current file saves with a sensible name
Slow connection	Test over cellular data	The first useful content appears quickly
Accessibility	Increase the phone’s text size or zoom	Important content remains available and understandable

If a PDF opens with tiny text, go back to the source document. Export a narrower version. Higher resolution alone will not fix the layout. If static HTML moves sideways, inspect wide tables, fixed-width images and CSS containers. In most cases, give images a maximum width of 100%, so that they shrink with the screen.

Make sure that the address is correct. When a Pages project has no 404.html file, Cloudflare treats it as a single-page application (a site where one page answers every path). Cloudflare then answers any unknown path with the home page, not with an error. Its serving documentation explains this. For this reason, a typo in menu.pdf can look like a working link. Make sure that the URL opens the menu itself, not a placeholder page.

Generate the QR Code With a Separate Tool

After you test the live link, paste it into a QR generator. The host supplies the URL. The generator only turns it into a scannable image.

Adobe Express has a QR generator that downloads PNG, JPEG or PDF files. Many design and print tools also include one. Before you use a generator, review the terms of the provider. Never encode an address that contains private information.

Use this process:

1. After the menu loads on a phone, copy the public menu URL from the browser address bar.
2. Paste it into the QR generator.
3. Choose a dark foreground on a plain light background.
4. Do not put a large logo over the code.
5. Export a high-resolution PNG for office printing, or a PDF when a print shop asks for print-ready artwork.
6. Save the graphic with a clear file name, such as main-menu-qr-2026.png.

Some QR services encode a short link on their own domain. That link then redirects to your menu, so that you can change the destination later. The catch is that your printed cards then depend on that service and your account with it. With a stable menu URL, a plain static code is enough. You change the file behind the address, never the code.

QR codes have four levels of error correction (extra data that repairs a damaged code), named L, M, Q and H. According to DENSO WAVE, the inventor of the QR code, Level M restores about 15% of the data. It is also the level that people select most often. Error correction helps with minor scratches and smudges, but it cannot make up for poor printing. A clean, simple code remains the safest choice.

Print and Test Your QR Code Menu

A code that scans from a monitor can still fail on paper. Glossy lamination, low toner, decorative backgrounds, folds and undersized codes all cause trouble.

Before you order a full set of table cards, print one sample at the final size. A code on a wall or window must be much larger than one on a table card, because guests scan it from farther away.

Keep a blank border around all four sides. DENSO WAVE’s QR code basics call for a quiet zone four modules wide around the symbol (a module is one of the small squares). Do not let text, borders or artwork enter that space.

Test the sample under realistic conditions:

• Scan with the built-in iPhone Camera app and with an Android camera.
• Test from the distance at which a seated guest will hold the phone.
• Try bright daylight, ordinary indoor light and dim evening light.
• Rotate the table card. Test it from several angles.
• Place the sample under the laminate or cover that the restaurant uses.
• Make sure that the browser opens the correct live menu. It is not enough that the camera recognizes a code.

Add a short instruction beside the code, such as “Scan to view the current menu.” Also print a short, readable fallback URL under the code. A damaged camera, a locked-down phone or an accessibility need can make scanning hard. Also, some guests prefer to type. Keep a few current printed menus at the host stand too.

Update the Menu Later Without Changing the URL

The printed card points to a fixed address, but the file behind it can change. If the address and the file name stay the same, you never need a new QR code.

When prices or dishes change, use a controlled routine:

1. Edit the original design file or HTML source. Do not patch the published copy.
2. Update the visible revision date.
3. Export the new PDF into the same folder with exactly the same file name, menu.pdf. For an HTML menu, save the revised HTML files.
4. In Cloudflare, open Workers & Pages. Select the menu project. Choose Create a new deployment. Pick production. Drag in the complete folder, not only the changed file.
5. Open the original URL in a private window.
6. Scan one of the codes already in the restaurant.
7. Make sure that several changed prices match the approved source.

On Netlify, step 4 is different. Drag the updated folder onto the dropzone on the Deploys page of the project.

Cloudflare Pages tells browsers to look for a newer copy of a file on each visit. As a result, guests normally see the new menu immediately. If a phone still shows the old prices, reload the page. Do this before you decide that the upload failed.

If you published the wrong file, Pages can put a previous deployment back. Open the deployments list of the project. Open the actions menu on the earlier deployment. Select Rollback to this deployment (rollback documentation).

A stable link also reduces mistakes. If staff create a new project or file name for each change, older cards lead to outdated prices. Give one person responsibility for the live menu. Keep previous versions in an archive folder on your computer, not in the published folder. Every file that you upload stays reachable at its own URL.

If you publish an HTML menu and want rough visitor numbers, Cloudflare can add Web Analytics to a Pages project from its Metrics tab. Web Analytics adds a script to HTML pages. For this reason, it does not count a PDF that a guest opens directly.

Practical Examples and Pitfalls

The same method fits several restaurant situations. Choose the format for the customer’s setting.

Example	Sensible Setup	Reason
Neighborhood café	Public, one-page PDF menu	Staff can replace seasonal drinks at the same link
Multi-section restaurant	Public static HTML menu	Section links reduce long scrolling on a phone
Catered private event	A separate PDF at its own address, sent only to the guests	Event pricing stays off the public menu. Leave out anything confidential, because guests can forward a link
Food truck	Public compact PDF with large type	The menu loads quickly, and guests can read it while they stand outside

Most QR menu failures come from these mistakes:

• Uploading a photograph of a printed menu with tiny or blurry text
• Encoding a dashboard link, a preview address or a single-deployment address instead of the main project address
• Putting an ordinary table menu behind a login or an email form
• Printing the code before you test the destination on a phone
• Removing the quiet zone or using a low-contrast brand color
• Renaming the file or creating a new project for every price update
• Assuming that a QR code provides ordering, payments, reservations or stock control

A Setup That Lasts

Begin with the reading experience, not the square graphic. Prepare a narrow, searchable PDF or a responsive HTML page (a page that fits any screen width). Publish it at a stable address, and test it on real phones. Only then create the code.

The durable setup has four parts:

• One mobile-readable source of current menu information
• One stable URL, ideally on the restaurant’s own domain
• One clean, well-tested QR code that points to that URL
• One documented routine to replace the menu and to test the result

With that in place, a price change means a new upload, not new cards. To test every update, scan a code that is already on a table. That one-minute test finds most mistakes before guests do.

A docs portal with Ask AI
and support tickets

Connect a repository, or describe your product to start. Each docs site has search, Ask AI, an API console, an MCP server and support tickets.

• Publishes from GitHub on every push
• Works with Mintlify repositories
• API console from your OpenAPI file
• MCP server and llms.txt for AI agents
• Ask AI and support tickets
• Analytics for people and AI agents

Start Free→ Questions? Ask AI in our docs

No card required.