The Coffee Shop Website Recipe: What to Build Before Opening

To build a coffee shop website, start with the three things a hungry passer by wants: a menu in plain text with prices, your opening hours and your address with directions. Then add the story of your beans and a way to get in touch. Five pages is enough. Everything else is a bonus.

• AI Web Maker built the Copper Kettle Coffee sample website, 5 pages, in 44 seconds on 2 November 2026. See the sample's facts
• In the UK, allergen guidance covers non-prepacked food such as drinks made to order in a coffee shop. Food Standards Agency guidance
• Google asks a business to use its real-world name, address and hours on its profile. Google Business Profile guidelines
• Google uses the mobile version of a site for indexing and ranking. Google mobile-first indexing

What does a coffee shop website have to do?

It has to answer a stranger's questions in seconds: what do you sell, what does it cost, are you open, and where are you.

Think of the visitors you actually get. A local checks your hours before walking over. Someone near your street searches "coffee near me" on a phone and wants the nearest open door. A tourist wants to know if you serve breakfast. A parent wants to know if you offer a plant milk. None of them wants a long essay about passion for coffee.

So the job of the site is practical first and emotional second. The practical part gets people through your door today. The emotional part, your story and your beans, is why they come back and why they tell a friend. Both matter, but the order matters more.

A coffee shop also has a quirk most trades do not: the visit is short and frequent. People do not hire you once. They buy a flat white on Tuesday and a pastry on Thursday. Your website supports that habit by being the fastest place to check anything about your shop. If a visitor has to zoom, scroll through a PDF or hunt for the hours, they will just walk to the next cafe.

To see this idea worked out, open Copper Kettle Coffee, the sample website. It is a fictional coffee shop, made to show what AI Web Maker builds, and its people, reviews, prices and contact details are invented. Its home page puts the shop's name and its signature coffee first, then the range, the origins and a way to get in touch.

Which pages does a coffee shop website need?

Five pages cover it: a home page, a shop, your story, your coffee and a contact page. That is exactly how the Copper Kettle sample is built.

Here is what each page does and where you can see it on the sample.

Page	What it must do	See it on the sample
Home	Show the name, the signature coffee, the range and a way to get in touch	Home
Shop	List what people can buy, such as beans, with prices	Shop
Our Story	Say how the place began and who runs it	Our Story
Our Coffee	Explain where the beans come from and how you roast	Our Coffee
Contact	Give the address, hours and an enquiry form	Contact

Notice what is not on the list. There is no separate page for "services", no blog to start with and no gallery of forty photos. A new coffee shop is better served by five pages that are correct than fifteen that are half finished. You can add pages later, once the basics are earning their keep.

If your shop sells food as well, the menu belongs on the home page or the shop page, not hidden behind a download. If you roast your own beans, the coffee page becomes more important. If you are a plain neighbourhood cafe with no roasting, you can fold the coffee page into your story and run four pages. The structure bends to fit the business.

What should each page say?

Each page should say one clear thing in plain words, with the facts a visitor needs placed above the fold on a phone.

Start with the home page. The first screen should name the shop, say what kind of place it is in a few words, and show the signature drink or your best photo of the counter. Under that, give a short range of what you serve, a line on where the beans come from, and a clear way to reach you. On the Copper Kettle sample, the home page has a section for its signature blend, one for the range, one for the origins and one for getting in touch. That order works because it moves from "what is this" to "what do you have" to "why should I trust it" to "how do I reach you".

The shop page is for anything people can buy beyond a cup. That might be bags of beans, ground coffee, gift cards or brewing gear. Write each item with a name, a short line on the taste, the size and the price. Plain text beats clever copy here. A visitor should know what a bag costs without opening another page.

The story page does the quiet work of making your shop feel like a place with people in it. Say how it began, who makes the coffee and what the space is like. Keep it short and true. The Copper Kettle story page splits this into how it all began, the people behind the business and the roasting space, which is a good template: a beginning, a face and a place. Use your own photos of the real counter and the real team if you have them, because customers can tell.

The coffee page is where you earn the "specialty" claim. Say where the beans come from, how you roast them and how to brew them at home. On the sample, the page is titled "Sourcing and Roasting" and has sections for origins, roasting and home brewing. You do not need to be a coffee scholar. You need to be specific. "Washed beans from a single farm, roasted in small batches twice a week" says more than "the finest beans".

The contact page needs your address, your hours and a short form. We will come back to this below, because it is the page people open most.

How should you put the menu online?

Write the menu as plain text with prices, in real headings, so it loads fast, reads on a phone and can be found by search.

This is the most common mistake in the trade: the menu is a photo or a PDF. A PDF is slow to open on a phone, hard to read without zooming, and invisible to a screen reader. A text menu fixes all three. It also lets Google read what you serve, so a search for a flat white or a vegan brownie near your street has something to match.

Group items the way a customer thinks. Hot drinks, cold drinks, food, then extras such as plant milks. List each item with its price on the same line. Add a short note where it helps, such as the size or whether it can be made with oat milk. Keep the list short enough to scan in ten seconds. If your menu changes by season, put a date on it so nobody orders from last winter's list.

Do not bury the prices. Visitors who have to ask what a latte costs often just leave. If your prices change, edit the page the same day. An out of date price on a website feels worse than no price at all.

In AI Web Maker you can change the words, prices and sections of any page in the editor before the site goes live, and you can come back and edit them whenever the board changes. That makes a text menu easy to keep honest. Treat it like the chalkboard behind the counter: if it changes on the wall, it changes online.

How do people order ahead or get in touch?

Give them one simple route: a short enquiry form on the contact page, plus your phone number and address in plain text.

Many coffee shops want ordering ahead, and it is worth being honest about what is realistic. A full ordering system with payment and pickup times is a bigger project. If you are not ready for that, a form for bulk or event orders, such as office coffee for a morning meeting, is a sensible first step. The Copper Kettle contact page has a "Send an enquiry" section, which is the kind of form to copy.

Keep the form short. Ask for a name, a way to reach them, the date and a message. Every extra field loses some people. Tell visitors what happens next, for example that you reply the same day, but only promise what you will actually do. If you are too busy at the morning rush to answer messages, say you reply in the afternoon.

For walk in customers, the contact page should do something simpler: show the address, a map or clear directions, and the hours. Add a line about nearby landmarks, parking or the nearest stop if that helps. A person standing at the wrong end of the street, phone in hand, will be glad of one sentence like "we are next to the old post office".

If you sell beans online through the shop page, make clear how orders reach the customer: collection in the shop, local delivery or post. Say it once, in plain words, and put it near the prices.

How do you handle allergens, reviews and trust?

Say what you know about allergens, never fake a review, and show real people and a real place, because trust is what turns a browser into a regular.

Allergens first. In the UK, the Food Standards Agency publishes guidance for food businesses on giving allergen information, and its best practice guidance for non-prepacked food names drinks made to order in a coffee shop as an example of that category. The guidance applies to England, Northern Ireland and Wales, and prepacked for direct sale food has its own rules. You can read the allergen guidance for food businesses and the guidance on non-prepacked foods. Rules differ by country, so check your own food authority for what applies where you trade. Practically, a good habit is a short line on the menu page telling customers how to ask about allergens, plus clear marks on items where you know the answer.

Now reviews. Fake reviews are banned in the two big markets this guide's readers work in. The US Federal Trade Commission announced a final rule on 14 August 2024, in force from 21 October 2024, that bans fake or misleading consumer reviews and testimonials, including reviews by people who do not exist or who had no real experience with the business. Read the FTC announcement. In the UK, since April 2025 the law bans posting or commissioning fake reviews, and the CMA can fine a company up to 10% of its global turnover, as the UK government announcement says. This is general information, not legal advice. The simple rule is to show only reviews from real customers who really visited, and never write your own.

The Copper Kettle sample uses invented reviews because it is a made up shop, and says so. Your site should do the opposite: real quotes, real names where people agree, and nothing made up.

Beyond reviews, trust comes from being visibly real. Show your actual counter, your actual team and your actual roasting space. State your real address and hours. That is also what Google asks of a business profile, which wants the real name, address, phone number and hours.

How does the website work for every visitor?

Design it for a phone first, keep it fast, and make sure everyone can read and use it, including people with disabilities.

Most people will open your site standing on a pavement, so test it on a phone before anything else. Google indexes and ranks using the mobile version of your content, so a site that only looks good on a laptop is working against you. Check that the text is big enough to read without zooming, that buttons are easy to tap with a thumb and that the hours are visible without scrolling far.

Speed matters for the same reason. Compress photos so the page opens quickly on a weak signal. A hero photo of your counter should be sharp but not huge. Avoid autoplaying video and heavy sliders.

Accessibility is both the right thing to do and, in some places, a legal matter. The US Department of Justice's guidance of 18 March 2022 says Title III of the ADA prohibits discrimination against people with disabilities by businesses open to the public. It names the Web Content Accessibility Guidelines as helpful technical standards, and lists common barriers: poor colour contrast, colour alone used to give information, images without alt text, videos without captions, inaccessible online forms and mouse only navigation. You can read the DOJ web guidance. The current version of those guidelines is WCAG 2.2, a W3C Recommendation since October 2023. Again, this is general information, so check what applies in your country.

For a cafe, the practical steps are small. Use dark text on a light background with enough contrast. Describe each photo in a short alt text, such as "flat white on the oak counter". Label every form field. Make sure the menu is real text, which helps screen readers too. And do not use colour alone to mark something, such as a green dot for vegan with no label.

How do local customers find your coffee shop website?

They find it through Google Maps and local search, so keep your business profile and your website saying exactly the same things.

Most people looking for coffee search for it near them. That means your Google Business Profile matters as much as your site. Google asks businesses to represent themselves as they are consistently recognised in the real world, so use your shop's real name, with no slogans added, and the same address, phone number and hours on your site and your profile. Google's help page explains how to edit your business hours, including special hours for holidays and breaks in the day, which suits a cafe that closes in the afternoon or opens late on weekends.

Google also supports LocalBusiness structured data, which can tell it your hours, departments and other details in a form it can read. Write real content for people, because Google's systems prioritise helpful, reliable information made to benefit people, not content made mainly to rank.

That is the short version. For the full picture, including what to do about reviews and photos on your profile, read Restaurant SEO in 2026: How to Get More Diners From Google. A coffee shop faces the same local search questions as a restaurant, so most of it applies.

How do you build it with AI Web Maker, step by step?

Give AI Web Maker your shop's name and a short description, watch it build the site, then edit every page before you go live.

1. Open the AI Web Maker builder and enter your business name, an email, a phone number and a short description of your shop. Say what you serve, where you are and what makes the place yours.
2. Watch the build. AI Web Maker plans the pages, writes the words, chooses the photos and sets up the forms. The Copper Kettle sample, five pages, took 44 seconds.
3. Open the editor and go through each page. Replace placeholder words with your real menu, prices, hours and address.
4. Swap in your own photos of the counter, the cups and the team wherever you can.
5. Check the contact page: the enquiry form, the address and the hours.
6. Preview everything on a phone, then on a laptop.
7. Go live when you are happy. Building and previewing cost nothing. Going live costs $119 a year of hosting, and the domain name is paid separately.

A few things are worth knowing. Every page can be changed in the editor before going live: the words, the photos, the sections, the services, the prices and the hours. If you later want more content, optional AI work such as extra blog posts is paid with credits of about $0.65 each. To check how a site is doing in search once it is live, AI Website SEO Tools checks the pages of any website for the problems that keep it out of search results and says how to fix each one.

For a finished picture of the result, browse the coffee shop website example and click through its five pages. Then try the same steps with your own shop's details at AI Web Maker.

Frequently asked questions

How many pages does a coffee shop website need?

Five is a good start: home, shop, your story, your coffee and contact. The Copper Kettle sample uses exactly these. A plain neighbourhood cafe that does not roast its own beans can run four pages by folding the coffee page into the story. Add more only when you have something real to say.

Should the menu be a PDF or plain text?

Plain text. A PDF is slow to open on a phone, hard to read without zooming and invisible to screen readers. A text menu loads fast, reads well on any screen and lets search engines see what you serve. Keep prices on the same line as each item and update them as soon as they change.

Do I need to list allergens on my website?

Rules depend on where you trade. In England, Northern Ireland and Wales the Food Standards Agency publishes guidance on allergen information, including for drinks made to order in a coffee shop. A sensible habit is a short note telling customers how to ask about allergens, plus clear marks where you know the answer. Check your own food authority.

Can I use reviews on my coffee shop website?

Yes, if they are real. The US FTC rule in force from 21 October 2024 bans fake or misleading reviews, and UK law has banned posting or commissioning fake reviews since April 2025. Show quotes from customers who really visited and never write your own. This is general information, not legal advice.

How much does it cost to put the website online?

Building and previewing cost nothing. Going live costs $119 a year of hosting, and the domain name is paid separately. Optional AI work, such as extra blog posts, is paid with credits of about $0.65 each. You can edit and preview every page before you pay anything.

Your plan for this week

Do one thing a day and you will have a working site by the weekend.

On the first day, write your menu as plain text with prices and note your real hours and address. On the second, gather five or six honest photos of your counter, your drinks and your team. On the third, write three short paragraphs: how the shop began, where your beans come from and what a visitor should try first. On the fourth, open the builder, enter your details and let it build, then read the Copper Kettle sample beside your own to compare. On the fifth, edit every page, check it on your phone and add an allergen line to the menu. On the sixth, make your Google Business Profile match the site word for word. On the seventh, go live and tell your regulars.