Free bakery website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: okapi.md, data: okapi.json

Bakery website template: first screen on a phone

About this bakery website template

Bakery website template: one free HTML file for a neighbourhood bakery or coffee counter that sells a monthly box of six bakes by pre-order, with cakes, office platters and gift cards. Bright yellow, pink and violet cards with handwritten notes sit on a white page. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

At a glance, October 2026. One 110 KB index.html with its CSS and JavaScript inside, 13 sections, 22 Unsplash photos credited in CREDITS.md, Bricolage Grotesque, Host Grotesk and Playpen Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

People looking for a cafe website or a coffee shop website need the same answers: what is on the counter, when it opens and how to order. This page gives them for a bakery with a monthly box of six, a ten-line list of what is out of the oven by 7, cakes on 48 hours' notice and office platters for 10 to 80 people. A coffee counter can drop the cake and platter blocks and keep the rest.

Start with the six cards in the first block and the ten lines of the morning list, then the prices, the pre-order cutoff, the delivery radius and the allergy answer. All of it is demo text, so the agent must ask the owner for it, and for hours, address, phone, the crew story and the quotes. Keep the section ids, the classes AGENTS.md lists, and set the footer wordmark's --len to the new name's length.

It is a good base when a bakery sells by pre-order and wants a loud, friendly look. A place that needs table booking and a seated menu fits the restaurant template better. The weak spot is ordering: most order buttons jump to the form, which sends nothing until you connect a service, and the file has no basket or payment step. An owner who does not code can describe a bakery site to the 8B builder instead.

Good for:

Bakery or patisserie with a counter and pre-ordersCoffee shop or cafe with baked goodsCake studio or catering kitchenAny small food shop with a monthly menu, a delivery radius and gift cards

Turn the bakery website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/bakery-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/bakery-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/bakery-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/bakery-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my bakery: name, address, this month's six bakes with prices and diet tags, pre-order cutoff, collection time, delivery radius, cake and platter prices and notice, hours, phone, email, how people order>. Replace first the name, the bake cards, the prices, the 4 am crew story, the sourcing lines and the quotes. Keep the section ids, the classes AGENTS.md lists, four step cards and two review ribbons. Ask me for missing facts; never invent prices, allergy claims, reviews or contacts.

In a terminal

npx degit 8bsite/bakery-website-template my-site

Bakery website design and motion

Palette

#ffffff page background, photo frames, form fields, white chips and cards, and the text in the violet footer#0e0b16 body text, button lids, dark badges and field borders#ffd24a the bake of the year panel, the logo tab in the nav and yellow cards#faed8f pale yellow card ground, photo frames in the bake of the year and the ground of the stickers section#f9a220 orange starbursts, the small button label and some stickers#e0007a the main button label, the favicon and the times in the morning shift cards#fd48f2 the oven list panel, the phone menu overlay and the striped box band#a6f6f8 the cyan panel of the opening screen#1ce8ed link underlines and fills, badges, one tray card, the gift section ground and the second review ribbon#ffdbfd the pre-order steps panel, the pink fill of the cake frame and the pale pink the oven list fades toward#3b308f the footer ground, most handwritten notes, the dot print and striped bands#670a2e dark wine text and ring on the sticker section and the second review ribbon#a58bf0 lavender cards in the tray, the steps fan and the stickers#1b1545 the midnight ground at the start of the morning shift section

Fonts

Bricolage Grotesque: headings and the wordmark in heavy 800 weight, buttons and badges in 700
Host Grotesk: body text at 17 px regular, form fields and card lines
Playpen Sans: the handwritten notes beside headings (mostly violet), the step labels, reviewer names and the two cake quotes, at 500 weight

A white page of rounded colour panels stacked in a column, each on its own ground: cyan, magenta, pale pink, yellow, midnight blue. Cards sit in trays and fans, tilted a few degrees, with framed photos. Starburst stickers carry years and notices, and handwritten violet notes sit beside headings. Buttons are a coloured label beside a lid tab whose cover flips open on hover to show a dark face. The headings are very large and heavy.

This bakery website design opens on a cyan panel with a white dotted-print card and a tray of six cards pulled up over a striped pink band. Panels, sun disc and starbursts are CSS and SVG, so fourteen variables in :root recolour the page. Links fill with cyan on hover.

Every value of this bakery website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the bakery website page

Navigation
Fixed top bar: logo and wordmark on a yellow tab, five pill links, a Pre-order a box button; hides on scroll down; phone menu overlay
Six bakes. One box. Still warm.
First screen: pale cyan panel with the headline "Six bakes. One box. Still warm.", an intro, a Build your box button and a tray of six bake cards with prices
On load the heading, text, button and note rise in one after another, and the six bake cards jump up from below in turn, then rest tilted.
Out of the oven by 7
Magenta panel with the heading "Out of the oven by 7", a handwritten note and a list of ten bakes in huge type
The line nearest the middle of the screen is full width, heavy and dark while the others narrow, thin and fade to pale pink as you scroll.
Pre-order tonight, collect it warm
Pale pink panel: heading "Pre-order tonight, collect it warm", a Start a box button and four step cards in a tilted fan
On wide screens the four step cards start stacked and are dealt out to their tilted places as the section scrolls.
Bake of the year
Four winners of the yearly vote as photo cards with year stickers: 2025, 2024, 2023, 2022
Each photo card drops in with an overshoot and each year sticker stamps on, turned and large.
Who’s up at 4 am?
Section whose ground goes from night to sunflower yellow as you scroll, with a rising sun and four timed entries from 4:00 am to 7:00 am
The section ground runs from midnight blue through violet and orange to sunflower yellow while the sun disc climbs and grows with your scroll.
Why Okapi?
Six reasons as stickers around a round turning mark with the curved text "Why Okapi? · Why Okapi? · ..."
The six stickers scatter from behind the round mark to their places as the section arrives, and the ring of text turns with the scroll.
What the regulars say
Two tilted ribbons of customer quotes, three on each, running as continuous rows
Two tilted ribbons of quotes open like scissors as you scroll, and each row runs as a loop that pauses off screen.
Cakes that make the room go quiet
Pink frame around a celebration cake card with two quotes and an office platter photo
The pink field widens from the cake card to the whole frame while the quotes and the platter photo slide out from behind it.
Fair questions
Four questions as native details elements under a heading and a handwritten note
The heading pops in and the note writes itself in.
Give someone a better morning
Gift card section: heading, text, a Buy a gift card button and a gift card sliding out of a sleeve
The gift card slides up out of its sleeve and turns to its resting tilt while the photo drifts up behind it.
Come by, or just ask
Visit block with address, opening hours, phone, email and a counter photo beside an order form
The heading pops in and the counter photo tumbles into place.
Footer
Footer: large wordmark, a short line, an email list form, six links, three round icons and a copyright line with the Design: 8B credit
The large wordmark pops in.

Before you publish the bakery website site

Replace social preview image, favicon, phone number, email address, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Pre-order a box button in the nav and the phone menu lead to #october, the first block with the monthly bakes now; point them to your online ordering page, or keep #october if the box is ordered by the form.
Build your box button in the first block and Start a box button in the steps section lead to #visit, the order form now; point them to your box builder or ordering page, or keep #visit once the form is connected.
Order a cake button in the cakes section lead to #visit now; point them to your cake order form or enquiry page.
Buy a gift card button in the gift section lead to #visit now; point them to your gift card checkout page.
Still wondering? Ask the bakers link in the FAQ lead to #visit now; point them to keep it, or point it to a chat or contact page.
Privacy and Terms links in the footer lead to #visit now; point them to your privacy and terms pages.
Instagram and TikTok icons in the footer lead to the home pages https://www.instagram.com/ and https://www.tiktok.com/ now; point them to your own profile addresses.
The two forms (the order form in the visit section and the email list form in the footer) lead to nothing is sent: a script checks the fields, shows a thank-you line and clears the form now; point them to a form service or your own endpoint in the form action, and remove the preventDefault in the section scripts.
Both forms only simulate sending. They need a form service or an endpoint before the site can take orders.
GSAP, ScrollTrigger, SplitText and Lenis load from a CDN as ordinary blocking scripts at the end of the body.
The Privacy and Terms links point to the order form, and the social icons point to the home pages of the networks, until you set real addresses.

Questions about this bakery website template

Is this a free bakery website template I can use for a client?

Yes. It is one index.html under the MIT license, so you can ship it for a client at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr and there is no build step. Photos are Unsplash images and the three fonts are open source; CREDITS.md lists them.

Can a cafe use it as a coffee shop website template?

Yes, with edits. The morning list ends with strong coffee and one sticker mentions coffee, but the file has no drinks menu section. Replace the six bake cards with your pastries or drinks, and ask the agent to remove the cake and gift sections with their scripts if you do not sell them.

Where do the order form and the email list send their data?

Nowhere yet. Both forms check the required fields, show a thank-you line and clear themselves, so a customer would think the order went through. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or point the buttons at your own ordering page.

How do I give it to Claude Code, Cursor or Codex?

Download index.html and AGENTS.md with the curl lines in AGENTS.md, put them in an empty folder and tell the agent to read AGENTS.md first. Give it the files, not the page address, which an agent reads only as a summary. Then paste the prompt from this page, filled in.

What must stay unchanged when I edit it?

Keep every id and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the classes AGENTS.md lists. The steps section needs four cards and the reviews two ribbons of three quotes. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

Can I get a bakery site like this without editing code?

Yes, with 8B's AI website builder. You describe the bakery in a sentence and its engine designs a new site, its own design, not this template. Designing and restyling are free; publishing with hosting, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

Not a bakery website? More free templates