What Goes at the Top of a Cafe Homepage Before Visitors Scroll

Thomas Garner

Oct 7

11 min read

Short answer: before a single scroll, a cafe homepage needs to say the name and the place in plain words, show one honest proof detail, offer one clear action, and never bury the hours or address behind a slider.

I have looked at enough cafe homepages by now to notice the same pattern over and over. A big photo of latte art fills the screen, the logo sits centered above it, and a menu link waits in the navigation bar. It looks clean. It also tells a first time visitor almost nothing useful. They cannot see where the shop is, whether it is open right now, or what makes it worth a stop instead of the coffee shop they already know.

This post is about that first screen specifically, the part of your homepage a visitor sees before they scroll at all, on a phone and on a laptop. It is not the whole homepage, and it is not just the headline. It is everything competing for attention in that first view, and what actually deserves to be there.

What a First Time Visitor Actually Needs

A stranger landing on your homepage, whether from a Google search, a shared link, or a Maps click, is trying to answer a short list of questions fast: is this the right kind of place, where is it, is it open, and what do I do next. A homepage that makes them scroll or hunt for any of those answers is asking more patience of a stranger than a stranger usually has.

That means the first screen has four real jobs to do. First, say the name and the place in actual words, not just a logo mark, since a logo alone does not tell a new visitor what city or neighborhood they are looking at. Second, show one honest proof detail, something specific and true, a founding year, a neighborhood landmark, a real detail that signals this is a real, established place rather than a placeholder template. Third, offer exactly one clear action, whether that is get directions, see the menu, or order ahead, rather than five competing buttons that all shout equally. Fourth, do not hide the practical facts, hours, address, whether it is currently open, behind a slider or a scroll a visitor has to work for.

None of this requires giving up a good hero photo. A strong photo and a clear first screen are not in tension with each other. The problem shows up when the photo is the only thing on the first screen, with everything a visitor needs pushed below it.

It helps to picture two specific people landing on your homepage at the same moment. One is standing on the sidewalk outside, phone in hand, trying to confirm you are open before walking in. The other is three states away, planning a trip and trying to decide whether your shop is worth a stop compared to two other tabs they also have open. Both of them are looking at the exact same first screen, and both of them need it to answer a different question fast. A first screen built around a single decorative photo serves neither one well, while a first screen built around the four jobs above answers both of their questions without either of them scrolling.

What Search Engines Want From the Same Space

Google's own guidance on creating helpful, reliable, people first content asks a simple, blunt question of any page: does this page provide substantial value when compared to other pages, and would you be comfortable telling a person that your page is the best result for what they searched. A homepage whose first screen is a photo and a logo, with no actual text describing what the business is or where it is located, struggles to answer that question well, because there is genuinely very little content there for anyone, human or otherwise, to evaluate.

This is not a call to stuff the first screen with keywords or paragraphs of copy. It is closer to the opposite. Google's guidance repeatedly favors pages that are clear and give people the information they came for, over pages built primarily to perform well in search results. Putting the name, the neighborhood, the hours, and one clear action in actual visible text on the first screen serves the same purpose for a search engine that it serves for a human visitor, because both are trying to quickly confirm what this page is and whether it answers what they are looking for.

The practical version of this is simple. If your first screen currently has no text at all describing what the business is and where it sits, beyond a logo and a photo, that is worth fixing regardless of what a search engine thinks of it, because it means real visitors are getting the same thin first impression.

It is worth being precise about what this guidance does and does not say. It does not hand out specific rules about pixel counts, word counts, or exactly where the name and address must sit on a page. It talks in terms of whether a page gives people the information they came for and whether it would hold up if someone asked you directly why your page deserves to be the best answer to their search. That is a higher, more honest bar than checking boxes, and a first screen with real, visible text describing the business and its location is a straightforward way to clear it, whatever the exact layout ends up looking like.

Building the First Screen, Piece by Piece

Start with the name and the place in real text, not just inside an image. A short line under or near the logo, your name in a specific neighborhood or city, does the job in under ten words. This should be visible without scrolling on both a phone and a laptop, which usually means keeping it near the very top rather than letting a full screen hero image push it down.

Next, the one proof detail. This does not need to be elaborate. A founding year, a specific ingredient sourcing note you can back up, or a plain description of what kind of place this is, roastery and cafe, drive through and sit down, specialty focused, gives a stranger something concrete to hold onto beyond a pretty photo. Keep it honest and specific rather than a vague superlative that could describe any cafe anywhere.

Then the one action. Pick the single thing you most want a first time visitor to do, whether that is getting directions, seeing the menu, or placing an order, and make that button or link the clearly dominant one on the first screen. If there are other things you also want visible, order online, join the list, they can exist, but they should not compete equally with the one primary action for a visitor's attention.

Finally, do not let the practical facts hide. Hours, address, and whether the shop is currently open should be visible or one tap away on the first screen, not buried in a footer a visitor has to scroll the entire page to reach. On a phone specifically, this often means a compact bar near the top, current hours status and a tap to call or get directions, rather than assuming a visitor will scroll all the way down to find that same information later.

Try building these four pieces in that order, name and place first, then proof, then the one action, then the practical facts, rather than trying to redesign the whole first screen at once. Each piece is a small, contained change you can make to an existing homepage without touching the rest of the site, and doing them one at a time makes it much easier to see exactly what each change is contributing, rather than overhauling everything and losing track of which part helped.

The Mistakes I See Most Often

The most common mistake is a full screen photo or video slider with no text at all layered over it, or text so small and low contrast against the image that it is effectively invisible. A slider looks polished in a portfolio but tests poorly for a real visitor trying to get an answer in three seconds, since it often requires waiting for the slide to change or scrolling past it entirely to find any real information.

A close second is a first screen with several buttons all competing for equal attention, order online, reserve a table, join our list, view menu, contact us, none of them visually dominant. When everything is emphasized, nothing is, and a visitor has to stop and think about which button matters to them instead of being guided toward the one action that matters most.

A third mistake is a popup that appears the moment the page loads, before a visitor has even seen the first screen underneath it, whether that is an email signup, a cookie notice styled as a full screen takeover, or a promotional offer. Whatever value that popup provides, it comes at the direct cost of the first impression you worked to build, since the visitor now has to close something before they can see anything.

The smallest but most avoidable mistake is simply leaving the practical facts, hours and address specifically, entirely off the first screen and assuming the visitor will find them further down or in the footer. A stranger deciding whether to visit right now, on their phone, standing somewhere nearby, should not have to scroll a full homepage to find out if you are even open.

A First Screen Checklist

Here is the plain version to check your own homepage against, on both a phone at a normal width and a laptop screen, without scrolling on either.

Name and place visible in actual text, not only inside a logo image. One honest, specific proof detail visible, not a vague claim. One clearly dominant action, with any secondary buttons visibly smaller or less prominent. Hours and address visible or one tap away, not buried below the fold. No popup blocking the first view on page load. No slider or video the visitor has to wait through or scroll past to see any text at all.

If you can check every one of those boxes on both a phone and a laptop without scrolling, your first screen is doing its job. If two or three are missing, that is usually a focused afternoon's worth of work rather than a full redesign, since most of this is about what gets prioritized in the existing layout rather than building something new from scratch.

Run through the checklist again in a month, on both a phone and a laptop, the same way you did the first time. Homepages drift. A new promotional banner gets added above the hours, a seasonal photo swap turns into a full screen takeover, a popup gets bolted on for a signup campaign and never removed. None of those additions are wrong on their own, but each one is competing for the same limited first screen space, so it is worth checking back periodically rather than assuming a fix made once stays fixed forever.

Frequently Asked Questions

What should be visible on a cafe homepage before scrolling?

The name and place in actual text, one honest proof detail, one clear dominant action, and the hours and address visible or one tap away. These should all be visible without scrolling on both a phone and a laptop. A large photo alone, with no text describing what the business is or where it sits, leaves a first time visitor with very little to go on.

Should the full menu be on the first screen?

No. A see the menu link can be the one clear action if that fits your goals, but the full menu belongs further down the page or on its own page. Packing it into the first screen crowds out the four things a newcomer needs before scrolling: the name and place in real text, one honest proof detail, one dominant action, and the hours and address. Check the result on a phone and a laptop.

Is a full screen photo slider a good idea for a homepage?

It tests poorly for a first time visitor trying to get an answer quickly, especially if there is no text visible over or near it, or the text is low contrast against the image. A visitor often has to wait for the slide to change or scroll past it to find any real information, which works against the first screen's job.

Does Google care what's on my homepage's first screen?

Google's guidance on creating helpful, reliable, people first content (Google Search Central, accessed September 21, 2026) asks whether a page provides substantial value and clearly answers what a visitor is looking for. A first screen with no real text describing the business and its location gives both a visitor and a search engine very little to work with.

How many buttons should be on the first screen?

One clearly dominant action. Pick the single thing you most want a first time visitor to do, get directions, see the menu, or order ahead, and make that button the obvious one. Secondary links such as order online, join our list, or reserve a table can stay, but visibly smaller. When five buttons shout equally, a visitor has to stop and decide which matters instead of being guided toward it.

Should hours and address be on the homepage or just the contact page?

Both, but the homepage's first screen should show the hours and address, or put them one tap away, without any scrolling. Someone on the sidewalk with a phone, checking whether you are open before walking in, should not have to reach a footer or the contact page. On phones, a compact bar near the top with current hours status plus tap to call or get directions usually does the job well.

What's wrong with a popup on page load?

It blocks the very screen the visitor came to see, whether it is an email signup, a cookie notice styled as a full screen takeover, or a promotional offer. Whatever value it adds costs you the first impression, because the visitor must close something before seeing your name, place, hours, or main action. Popups also creep in over time, so recheck your first screen monthly on a phone and a laptop.

What counts as a good proof detail for the first screen?

Something specific and true that signals a real, established place: a founding year, a neighborhood landmark, a plain description such as roastery and cafe or drive through and sit down, or a sourcing detail you can back up. A vague superlative that could describe any cafe anywhere gives a stranger nothing concrete. Keep it short, visible without scrolling, and near your name and neighborhood line.

Does this apply the same way on a phone and a laptop?

Mostly, yes, though the layout that achieves it will look different on each. The same four jobs, name and place, proof, one action, practical facts, need to be handled without scrolling on both. Checking your own site on a phone at a normal width and separately on a laptop screen is the simplest way to confirm both work.

How big a project is fixing a weak first screen?

For most sites this is a focused reprioritizing job rather than a full rebuild, moving existing content higher, shrinking a slider, adding a short line of text near the logo, rather than designing anything new from scratch. Most homepages already have the pieces; the first screen problem is usually about what gets shown first, not what is missing entirely.

Work with Hillcane

A big hero photo and a logo tell a first time visitor almost nothing. Here is what actually needs to be visible on a cafe homepage before anyone scrolls.

If you want a second set of eyes on your homepage's first screen, reach Hillcane at hillcane.co/contact or call (256) 384-2449.