Restaurant and café menus
Ramen restaurant menu website for a late night shop
Ramen does not travel well, so a ramen shop taking pickup orders has to explain how it packs the soup. This one page example for an invented Melbourne laneway shop does that in the menu intro, tells the eighteen hour broth story and makes the late Friday and Saturday hours easy to find.
The home page at three widths
The same page on a desktop, a tablet and a phone, exactly as it renders. Scroll inside each frame to read it all; nothing here can be clicked or submitted.
Page by page
- Home /
- Hero (full photo), Menu (photo rows), About (photo and story), Opening hours (compact card), Contact (details and form)
- Privacy policy /privacy
- Text (single column), 5 in a row
- Terms of use /terms
- Text (single column), 5 in a row
The page
A full photo hero of a bowl of tonkotsu, the menu in photo rows across ramen and sides, a photo and story section on the broth, opening hours in a compact card and a contact section with directions down the lane. The Charcoal palette in dark mode suits a shop under a white lantern.
Extras and add-ons
Extra noodles, egg or chashu go in the order notes here, which keeps the menu short. A shop that sells many extras could make them products in an extras collection, shown last on the menu, so they are priced and added to the order like any dish.
What makes this website work
Pickup explained for soup
The menu intro says the broth and noodles are packed separately and should be eaten within twenty minutes. It sets the right expectation for a dish that suffers in a box, which keeps pickup customers happy.
One batch a day, said plainly
The broth story ends with "when it runs out, we close", and the hours note repeats it. It explains early closing before anyone is disappointed, and it is the most persuasive line on the page.
Late hours in the hours table
Friday and Saturday until 1 am sit in the hours card beside the note. For a laneway shop that lives on late trade, the hours are a selling point, not a footnote.
Questions people ask
How do I handle add-ons like extra egg?
Two ways: ask customers to write them in the order notes, as this example does, or sell them as products in an extras collection shown at the end of the menu. Products are priced by the server at checkout, while notes are free text you read in the order.
Can the site say when we have sold out?
Archive a dish in the store admin, or track stock on it and set the stock to zero, and it shows as sold out or disappears at the next catalog sync. For closing early, add an announcement bar at the top of the page and remove it the next day.
Can I use a dark theme?
Every palette has a light and a dark version, and contrast is checked to the WCAG AA level in both. This example uses Charcoal in dark mode because it suits the photos of broth and the shop's look. Switch palettes or modes in the builder's Theme tab.
Does the menu work on phones in a queue?
The photo rows layout stacks the photo beside each dish on a phone, and the Add buttons sit within thumb reach. When ordering is on, an order bar fixed to the bottom of the screen shows how many items are in the order, with a View order button that opens the cart.
How do customers find the shop in a laneway?
The contact section intro gives directions, here halfway down the lane under the white lantern, and a map section can show the address with a directions link. Directions in words often help more than a pin for small laneway shops.
Build your own in about a minute
The button below opens the generator with this use case already described. Change the wording to match your own, generate, then edit anything you like.
Make one like thisOther website examples
Sushi restaurant menu website with pickup ordering
A hand roll bar has a menu short enough to fit on one screen and food that sells on looks. This one page example for an invented Surry Hills counter shows every dish with a photo and price, takes pickup orders paid online, and explains why a hand roll should be eaten within a minute.
Burger restaurant menu website built for order ahead
A burger joint's website has one job: get an order in before the customer reaches the queue. This one page example for an invented Newcastle smash burger shop puts the order button in the hero, shows every burger with a photo, and explains pickup in three steps so first timers know what to expect.
Thai restaurant menu website with a printed style menu
Thai menus are long and organised by type, and regulars know exactly what they want. This one page example for an invented Fortitude Valley restaurant shows the menu like the printed one on the table, in columns with dotted leaders to the price, with protein choices and a note about chilli.
For everything this generator can do, see the website maker.
Sources
Written and checked by the OneCraft team. Last checked .