The answer depends on guest behavior at your specific operation: quick-service and casual-dining sites should put online ordering first; full-service and reservation-driven concepts should put reservations first; hybrid concepts should split the hero CTA and let the visitor self-segment. Most operators get this backwards and lose the higher-value action.
Where the Hero Goes Wrong
Most restaurant homepages we audit have two equally-sized buttons in the hero. “Order Online” sits next to “Make a Reservation.” Both wear the same color, both wear the same shape, both shout at the same volume. Neither one wins. The visitor freezes for half a second and starts scrolling, and the cheaper action — the one with the lower average ticket and fewer covers — gets the click as often as the higher-value one.
The math is hidden in plain sight. One concept earns more per visitor through ordering. Another earns more through reservations. A homepage that doesn’t choose loses to the one that does.
Start with one question: where does your revenue actually come from?
Before any design choice gets made, we ask the operator to do one calculation. The number that comes out of it decides the hero.
Order volume × average ticket = ordering revenue
Pull thirty days of ordering data from your platform — Toast, ChowNow, Olo, whoever runs your off-premise. Multiply daily order count by your average ticket. That’s your monthly online-ordering revenue. Most operators we work with haven’t run this number in a year.
Reservations × average ticket × covers per night = reservation revenue
Do the same calculation for reservations. Take nightly reservation count, multiply by average dinner ticket, multiply again by average covers per reservation (usually 2.0–2.6). That’s monthly reservation revenue.
The math usually surprises operators
A casual restaurant doing 80 orders a day at $32 average ticket is $76,800 a month in online ordering. The same restaurant doing 12 reservations a night at $48 average ticket and 2.4 covers per reservation is $41,500 a month in reservations. Online ordering is roughly 1.85x the reservation revenue — and the hero should reflect that.
We’ve watched operators stare at this calculation and immediately rewrite their brief. The reason it lands so hard is that reservations feel bigger. They’re tied to the dining room, to the staff, to the story the operator tells about the restaurant. Ordering feels like a side hustle. The numbers say otherwise on most casual concepts. The homepage should be built around the dollar value of the action, not the emotional weight of it.
Five concept types and their right answer
The math gives you the number. The concept tells you what the number means. Five buckets cover almost every restaurant we touch.
Quick-service → Ordering first
Drive-through-substitute audience. The guest opens the site because they’re hungry right now and they’re not coming inside. Ordering is the primary verb. Reservations don’t exist for this concept; the hero is one button and it says “Order.”
Casual dining → Ordering first, reservation visible
This is the bucket most American restaurants fall into. Off-premise carries more daily revenue than reservations do, and the math from the previous section almost always confirms it. Put ordering in the hero. Keep the reservation link in a sticky header and inside a secondary CTA below the fold. Both actions stay accessible; only one wins the hero. If you’re operating across multiple addresses, the rules shift further once the homepage has to route to a location before it can route to an action — we covered that pattern in our multi-location restaurant website structure guide.
Full-service → Reservation first, ordering for off-premise
The table experience is the primary product. Guests come for the room, the service, the wine list. Ordering exists for the regulars who want the dish at home on a Tuesday, but it’s a click away — not a competing hero CTA. Reservation is the verb.
Fine dining → Reservation first, no ordering CTA
If ordering exists at all, it lives deep in the site or in the footer. Surfacing it in the hero dilutes the brand and confuses the diner about what kind of room they’re walking into. The hero CTA is reservations only, and that single choice signals the concept clearly to anyone who lands.
Bar / cocktail concept → Reservation first, walk-in friendly
Peak nights are reservation-bound; off-peak is walk-in. The reservation CTA captures the high-intent guest who’d otherwise lose the seat. A small “we welcome walk-ins” line near the hero handles the rest. Ordering, if it exists for a delivery program, sits in the secondary nav.
What to do with the second CTA
The losing action doesn’t disappear. It moves. Where it moves — and how loud it speaks — decides whether the homepage works.
The second CTA lives below the hero, inside a sticky header on mobile, and again in the footer. That’s three appearances on a single scroll. Plenty for the guest who came looking for it, quiet enough to let the primary action breathe.
Visual weight matters more than position. The secondary button gets an outline style, a muted color, or a plain text link — never the same fill, the same size, and the same color as the primary. When both buttons match, the visitor freezes. When they differ, the eye picks the loud one and acts.
Mobile and desktop split here too. On mobile, the sticky header collapses to icons and the primary CTA stays visible on every scroll position. On desktop, the secondary action can hold a permanent spot in the top-right nav without pulling focus from the hero.
Two homepage patterns that work
Two patterns cover almost every operator we ship for. The right one comes down to whether your concept genuinely splits or genuinely doesn’t.
Single-CTA homepage — the Tatsu approach
One primary CTA in the hero. One quieter secondary action below the fold and in the sticky header. This is what we built for Tatsu Ramen, where the ordering revenue across multiple locations is materially larger than the reservation revenue and the hero reflects that. Visitors who came for reservations still find them — they just don’t get a fork-in-the-road moment at the top of the page.
Split hero — the diner-segmenting approach
Two visually-equal CTAs only when the concept genuinely splits 50/50. This is rare. We’ve used it on hybrid concepts where lunch is takeout-heavy and dinner is reservation-heavy and the diner self-identifies the moment they land. If your data doesn’t show a clean split, don’t fake one. Pick the primary action and commit.
Common mistakes
Three patterns show up across almost every audit. Each one looks reasonable in isolation and each one quietly costs revenue.
The first is three equally-weighted CTAs. Order, Reserve, View Menu — all the same color, all the same size. The paradox of choice kicks in and the click-through rate drops on every option. Pick two; demote the third to a text link.
The second is the reservation widget embedded directly in the hero. OpenTable, Resy, and Tock all load heavy third-party JS that delays first contentful paint by a full second on a mid-range phone. The hero gets slow, the LCP score tanks, and the guest who only wanted to read the menu pays the cost. Link to the reservation flow from the hero; embed the widget on /reservations where the load cost is acceptable.
The third is an ordering CTA that opens inside a modal with broken focus management. The keyboard user lands inside it and can’t escape. Beyond the obvious revenue loss, that’s a failed keyboard accessibility check that turns into a legal risk. If you need a modal, build it with proper focus trapping and an escape route; if you don’t, send the user to a real page.
How we treat this in every engagement
The hero CTA decision is one of the highest-ROI calls we make on a restaurant homepage, and it’s the first thing we run the math on inside every Built by Pine engagement. We don’t guess. We pull the operator’s actual numbers from the last sixty days, sort the concept into one of the five buckets above, and let the data decide which button gets the hero. The rest of the homepage gets built around that choice — typography, color, imagery, the order of the sections below the fold, even the way the menu page links back up. A homepage that knows what it wants the visitor to do reads completely differently from one that’s hedging.
If you’re rebuilding and want this run on your numbers, our restaurant website design work starts here. For more on what a strong homepage looks like in practice, we walked through five real examples in our restaurant website examples post. The hero CTA decision is also the upstream cost driver on a rebuild — the integrations and audit depth that follow from it shape the budget, which is something we broke down in how much a restaurant website costs in 2026.
Ready to act on this?
Get a site that works as hard as you do.
Built by Pine designs and builds websites for restaurants and local brands that need stronger first impressions and cleaner paths to the next step.