# Free cheese shop website template

> Free HTML cheese shop website template for cheesemongers and delis: counter list, cellar, tastings, club. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Cheese shop website template: one free HTML page for a cheesemonger that matures its own wheels in a cellar, with a counter list, five cellar steps, tastings, a monthly club and a visit form. The look is light grey and black with hairline grids. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

- Page: https://8b.com/templates/affina/
- Live demo: https://8b.com/templates/affina/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/affina/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/cheese-shop-website-template
- Download ZIP: https://8b.com/templates/affina/cheese-shop-website-template.zip
- Template name in the repository: Affina
- At a glance: One 96 KB index.html with its CSS and JavaScript inside, 12 sections, 28 Unsplash photos credited in CREDITS.md, Geist from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

## Use it with an AI coding agent

Download the files into the project (Windows PowerShell: `curl.exe`):

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

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make this the site for <my shop: name, address, hours, counter cheeses with milk, age and price per kilo, farms we buy from, tasting dates, seats and prices, club plans, posting rules, phone, email>. Replace the shop name, address, cheeses, farms and prices first. Keep the section ids, the classes AGENTS.md lists and the --h, --w and --len values, setting each --len to the new word's character count. Ask me for any missing fact and never invent prices, ages, farms, hours or contacts.
```

Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/cheese-shop-website-template my-site`.

### Cheese shop website design prompt for any AI tool

Paste this cheese shop website design prompt into Claude Code, Codex, Cursor, Lovable, v0 or Bolt to build a cheesemonger's site from scratch, or hand it to a designer. It is this template's design written as decisions; with the template itself, the short prompt above is enough.

```text
Build a one-page website for a cheese shop that matures its own wheels in a cellar. Audience: local shoppers who want to know what is on the counter this week, and people who might join a monthly club. Static HTML, CSS and a little GSAP; no framework.
Sections in order: navigation, opening, this week's counter, five cellar steps, three milks, cut-to-order tips, seven farms, dated tastings, three club plans, questions, visit form, footer.
Type: Geist only; weight 300 for headlines and section titles with tight negative tracking, 400 for body, labels and buttons.
Colours: #f3f3f3 light ground, #0e0e0e black ground and text, #5c5c5c secondary text, #d3d3d3 hairlines, #ffffff text on black, #a5a5a5 small text on black.
Motion: one idea, the cellar. On the first scroll black floods the page from the bottom left; later sections reveal with hairlines drawing once. Respect prefers-reduced-motion.
Avoid: purple gradients, three icon cards, a centred hero with two buttons, stock food photography, rounded cards. Use alternating light and black bands, hairline grids, counter panels at five stepped heights and pill buttons.
Copy: short and concrete. Ask me for cheeses, prices per kilo, milk, ageing, tasting dates, club plans, suppliers and opening hours; never invent them. Mark every placeholder.
One action: Visit the shop, in the nav, leading to the visit form.
Phone: check at 390 px, 44 px tap targets, no horizontal scroll.
Done when: no console errors, visible keyboard focus, and you list every placeholder.
```

## About

A cheese shop website template has to show what is on the counter this week, explain why the cellar matters and get people to the door or onto a monthly plan. This page does it in one scroll. A deli website template for a butcher, bakery or farm shop with a counter can reuse the same rows by swapping cheeses for hams, pies or loaves.

As a cheese shop website template for Claude Code, Cursor or Codex, vibe coding starts with the facts only the shop has: prices per kilo, milk, raw or pasteurised, ageing times, tasting dates, club plans and delivery rules. The agent should replace the shop name in the bar, the menu and the footer wordmark, give each new counter panel its own height and width, and swap the farms for your suppliers. The [steps for editing it in Claude Code](https://8b.com/templates/for-claude-code/) cover the first session.

It suits a shop that buys from named makers and sells by weight, tastings or box. Drinks and desserts fit the [bubble tea bar](https://8b.com/templates/chewsday/) template better. The weak spot is ordering: Order for collection jumps to the visit form, which sends nothing yet, and the club and tasting buttons open an email. A shop selling online needs a cart, which this page does not have.

## Design

- Palette: #f3f3f3 (page ground of the first screen, counter, milk, cut, tastings, questions and footer sections, and the bar once scrolled), #0e0e0e (text and button borders on light grounds, and the ground of the second screen, cellar, farms, club, visit and the labels), #5c5c5c (intro paragraphs, tasting descriptions, seats, cut tip terms, answers and the footer base line on light grounds), #d3d3d3 (hairlines on light grounds, the outlined ghost word and the grid rules of the first screen), #ffffff (text and outline buttons on black grounds, the label text, and the visit form's inputs), #a5a5a5 (small text on black: label meta, step numbers, paragraphs on black, form labels and the milk cheese lists), #2e2e2e (rules on black, the ground of club parcels and the cellar frame, and the placeholder behind photos)
- Fonts: Geist (the only typeface: weight 300 for the headline, section titles and giant words at tight negative tracking, 400 for body text, labels, links and buttons, and 500 only for the wordmark in the bar)

Light grey bands alternate with black ones. The first screen is crossed by two vertical hairlines, and a black block grows from its bottom left corner. Counter panels stand at five different heights like a skyline, each with a black label of milk, age, name and price above a portrait photo. Section heads sit in a wide column beside a narrower intro. Milk bands alternate sides, while tastings, cut tips and questions are ruled rows.

As deli website design it is cool, not rustic: one typeface, Geist, at weight 300 with tight tracking keeps the giant milk words airy. Pill buttons fill from below. One visit photo arrives as [three columns sliding at different speeds](https://8b.com/templates/parallax/), and a ghost word drifts behind the headline.

## Sections and motion

- **Navigation** (navigation): bar with the wordmark, four links and a menu button; full-screen overlay with seven links, address, phone and email
- **Ripened down here** (opening): two screens: a two-line headline with a small pill, a product label panel, a framed cellar photo, then the dark cellar with three facts. Motion: On load the headline lines rise and the product label and cellar photo open upward; scrolling floods the page black from the bottom left, parts the headline to the sides, widens the cellar photo leftward across its frame and brings the second screen's copy in from the right.
- **On the counter this week** (counter): five cheeses on a stepped skyline of tall panels, each with a label of milk, age, name and price. Motion: With the scroll, each panel climbs out of the floor a beat after its left neighbour until the row settles into its stepped heights, and on phones the panels slide in from the left.
- **What the cellar does** (cellar): five steps of the maturing process beside a held square frame that turns a quarter turn per step and changes photo. Motion: A square frame held by CSS sticky turns a quarter turn per step while its photo stays upright and changes to the next step's photo, and each step's hairline fills as it passes.
- **Three milks, three tempers** (milks): three bands (cow, ewe, goat), each with a photo of the animals, a black field with a giant word and a short text. Motion: Each band's black field starts across the whole band and recedes to its 40 percent side as you scroll, with the giant word riding the edge and the photo settling from a closer crop.
- **Cut to order, wrapped in paper** (cut): a photo of a wheel being cut beside a heading and four ruled tips. Motion: The photo opens upward from its bottom edge, the heading rises line by line and a hairline draws above each of the four tips, once, as they enter.
- **Seven farms we buy from** (farms): seven farms on a horizontal track that slides sideways while the page scrolls down. Motion: The section holds a screen-high stage while the track of seven panels slides sideways by its own overflow and each photo drifts against the movement.
- **Thursdays in the cellar** (tastings): a heading, a photo of a laid table and four dated tasting rows with seats, price and a Book a seat link. Motion: The heading rises line by line, the photo opens upward and a hairline draws above each of the four dated rows.
- **The cellar club** (club): three monthly parcels (Pair, Board, Cellar) with photos, prices and join buttons, dealt out of one stack. Motion: On wide screens the three parcels start piled on the middle one, each tilted, and spread into their row with the scroll; on narrower screens each is dealt in from alternating sides.
- **Questions at the counter** (faq): six questions in native details elements with hairlines, beside a heading. Motion: The heading rises and a hairline draws above each of the six questions; opening one turns its plus into a minus.
- **Come downstairs** (visit): a text column with address, hours, phone, email and a message form, beside a shop photo cut into three sliding columns. Motion: Three columns showing thirds of one shop photo start offset by different amounts, some up and some down, and slide to meet as a single picture as the section nears mid-screen.
- **Footer** (footer): footer with a one-line description, two link lists, a very wide wordmark and a base line

## Good for

- cheesemonger or cheese cellar
- delicatessen, butcher or farm shop with a counter
- wine merchant, bakery or small food producer with tastings and a subscription
- any shop that buys from named makers and sells by weight or by box

## Questions

**Is it free to use for a shop or a client?** Yes. It is a single index.html under the MIT licence, with no build step and no CMS. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr. The photos are Unsplash images listed in CREDITS.md, and you should replace the demo photos with your own before launch.

**Can a deli, butcher or farm shop use it instead of a cheese shop?** Yes, if the shop sells by weight from a counter and buys from named makers. Swap cheeses for hams, pies or loaves, turn the cellar steps into curing or baking, and the farm panels into suppliers. A shop with a long catalogue needs more pages than this one.

**Does the visit form send messages?** No. It checks that a name and a valid email are filled, shows a thank-you line and clears the fields, and nothing is sent. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or delete the form and keep the email link. The tasting and club buttons open a mail program, not a checkout.

**What cheese shop website design prompt should I give Claude Code, Cursor or Codex?** Put index.html and AGENTS.md in an empty folder with the curl lines in AGENTS.md, and have the agent read AGENTS.md first. Give it the files, not the page address. Then paste the short prompt, filled in with your shop's facts. Lovable, v0 and Bolt take the full design prompt. In Cursor, [Plan mode lists the changes](https://8b.com/templates/for-cursor/) before it edits.

**What must I keep when I edit it?** Keep the section ids, the data-8b-section and data-8b-motion attributes and the classes AGENTS.md lists. Counter panels need their own --h and --w, and the footer wordmark and milk words a --len equal to their character count. Keep the header comment and the 8B meta tag. Keep the Design: 8B footer link unless the site owner asks to remove it.

**Can I get a site like this without editing code?** Yes, with [8B's AI website builder](https://8b.com/). You describe the site in a sentence and its engine designs a new one, in its own style rather than this template. Designing and restyling are free; hosting with SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

## Before publishing

Replace: social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses).

- Visit the shop button on the first screen and the Order for collection link in the counter section lead to #visit now; point them to your shop's order page or phone number, or keep #visit once the form is connected.
- This week's wheels and How the cellar works links on the first screen lead to #counter and #cellar now; point them to keep.
- Book a seat links in the tastings list lead to mailto: links to the shop's email with the tasting's name and date in the subject now; point them to your ticket or booking page for each tasting.
- Join with Pair, Join with Board and Join with Cellar buttons in the club lead to mailto: links to the shop's email with the plan in the subject now; point them to your subscription checkout for each plan.
- Send to the shop button in the visit form lead to does not send anything: the form action is #, and section-script:visit checks the name and email and shows the thank-you or error line now; point them to a form service (Formspree, Netlify Forms) or your own endpoint.
- Phone and email links in the menu, the visit section and the footer lead to tel: and mailto: placeholders now; point them to your real phone number and email address.
- The visit form sends nothing yet: the action is # and the thank-you line comes from a script.
- The tasting and club buttons open a mail program, not a checkout, until you replace the links.
- GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr; without them, or with reduced motion, the scenes do not run and the cellar frame shows only the first of its five photos.
- The nav hide-on-scroll and hover transitions keep running with reduced motion.

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).