Free cheese shop 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: affina.md, data: affina.json

Cheese shop website template: first screen on a phone

About this cheese shop website template

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.

At a glance, October 2026. 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.

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 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 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.

Good for:

Cheesemonger or cheese cellarDelicatessen, butcher or farm shop with a counterWine merchant, bakery or small food producer with tastings and a subscriptionAny shop that buys from named makers and sells by weight or by box

Turn the cheese shop 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/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

Prompt for the agent:

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.

In a terminal

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.

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.

Cheese shop website design and motion

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, and a ghost word drifts behind the headline.

Every value of this cheese shop 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 cheese shop website page

Navigation
Bar with the wordmark, four links and a menu button; full-screen overlay with seven links, address, phone and email
Ripened down here
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
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
Five cheeses on a stepped skyline of tall panels, each with a label of milk, age, name and price
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
Five steps of the maturing process beside a held square frame that turns a quarter turn per step and changes photo
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
Three bands (cow, ewe, goat), each with a photo of the animals, a black field with a giant word and a short text
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
A photo of a wheel being cut beside a heading and four ruled tips
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
Seven farms on a horizontal track that slides sideways while the page scrolls down
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
A heading, a photo of a laid table and four dated tasting rows with seats, price and a Book a seat link
The heading rises line by line, the photo opens upward and a hairline draws above each of the four dated rows.
The cellar club
Three monthly parcels (Pair, Board, Cellar) with photos, prices and join buttons, dealt out of one stack
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
Six questions in native details elements with hairlines, beside a heading
The heading rises and a hairline draws above each of the six questions; opening one turns its plus into a minus.
Come downstairs
A text column with address, hours, phone, email and a message form, beside a shop photo cut into three sliding columns
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 with a one-line description, two link lists, a very wide wordmark and a base line

Before you publish the cheese shop website site

Replace social preview image, favicon, phone number, email address and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
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.

Questions about this cheese shop website template

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 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. 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.