# Free ice cream shop website template > Free HTML ice cream shop website template for parlours and gelaterias, with flavours, prices and a pint club. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. Ice cream shop website template: one free HTML file for a parlour, gelateria or dessert shop, with a flavour deck, price rows, a Saturday workshop, a monthly pint plan and a booking form. The look is sticker style: lemon ground, ink outlines, hard shadows. AGENTS.md is included, so an AI agent can adapt it. - Page: https://8b.com/templates/melty/ - Live demo: https://8b.com/templates/melty/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/melty/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/ice-cream-shop-website-template - Download ZIP: https://8b.com/templates/melty/ice-cream-shop-website-template.zip - Template name in the repository: Melty - At a glance: One 97 KB index.html with its CSS and JavaScript inside, 12 sections, 18 Unsplash photos credited in CREDITS.md, Gabarito and Google Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.4 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/ice-cream-shop-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/ice-cream-shop-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/ice-cream-shop-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/ice-cream-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 . Replace first the shop name, including the footer wordmark's len, then flavours, prices, plans, suppliers, reviews and hours. Keep the section ids, the data-8b attributes the scripts read and the classes AGENTS.md lists. Ask me for missing facts; never invent allergen claims, prices, hours, suppliers, reviews 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/ice-cream-shop-website-template my-site`. ### Ice cream shop website design prompt for any AI tool Use this to build an ice cream shop site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief 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 an ice cream parlour or gelateria. Audience: locals deciding what to eat today, who need flavours, prices, hours and the address fast. Sections in order: navigation, opening, flavours, a morning routine, questions, prices, neighbours, a Saturday workshop, a monthly pint club, reviews, visit with a booking form, footer. Type: Gabarito 900 in uppercase for headings, flavour names and prices; Google Sans for body text, buttons and labels. Colours: lemon page ground #fff48d, ink #1d1c1c for text and outlines, white #ffffff cards, pink #fd74fd, green #83f582, cyan #7af7f7, coral #ff6a8d for gradients. Layout: sticker style, every box has a 1.5px ink outline, rounded corners and a hard offset shadow with no blur, some cards tilted slightly. No purple gradient, no three icon cards, no centred hero with two buttons; headings are huge and tight. Motion: one idea, flavour cards piling up and sliding in from below as you scroll; respect prefers-reduced-motion. Copy: short and concrete. Ask me for flavours, diet tags, prices, hours, address and workshop terms; never invent them, leave visible placeholders. One primary action, Order a pint, in a pill bar fixed to the bottom of the screen and repeated at the club section. Mobile: check 390px, tap targets of 44px, the bar must not cover content. Acceptance: no console errors, keyboard focus visible, list every placeholder. ``` ## About An ice cream parlour website template has to answer four questions fast: what is in the freezer, what a scoop costs, where the shop is and when it opens. This one puts the flavours first, the prices in the middle and the address and hours last, with a workshop and a monthly subscription between. It also suits a gelateria, dessert cafe or chocolatier, and as an ice cream shop website template for Claude Code it is one file to edit. If you vibe code the shop in Claude Code or Cursor, hand the agent the facts only the shop has: flavours and their diet tags, prices, hours, address, suppliers, workshop terms and plan prices. The demo invents all of them, plus the reviews. The agent should rename the shop everywhere and set the footer wordmark's --len to the new name's character count. It can change how many flavours, questions and reviews there are, but the Pint Club grid is built for three plans. Choose this ice cream store template when the menu changes weekly and you want workshops or a subscription on the same page. A [neighbourhood bakery](https://8b.com/templates/okapi/) selling cakes and pre-order boxes fits another page better. The weak spot is ordering: there is no cart or checkout, the Order a pint button only jumps down the page, and the form sends nothing until connected. If you would rather not edit code, 8B's builder starts from a sentence. ## Design - Palette: #fff48d (lemon page ground, the first screen, the logo pill, plan price pills, the end of the visit gradient), #1d1c1c (text, every 1.5px outline, the hard shadows (except under the dark button) and the dark button), #ffffff (white cards, nav bar, buttons, form fields, badges and the first review ribbon), #fd74fd (pink: button hover wipe, second highlight style, second question card, second review ribbon, shadow of the dark button), #83f582 (green: first highlight style, first question card, odd price pills, nav link hover, ribbon dots, gradient), #7af7f7 (cyan: third highlight style, third question card, even price pills, gradient), #ff6a8d (coral: start of the menu overlay and visit section gradients), #ffb38a (peach: middle of those gradients and start of the flavour card gradient), #b06cf8 (violet: end of the Pint Club sheet gradient and of the green card gradient) - Fonts: Gabarito (weight 900 only: uppercase headings and flavour names, prices, step numbers, opening times, the lowercase logo and the footer wordmark), Google Sans (body text at weight 400, buttons and links at 500, badges and small labels at 600) Every surface is a white, gradient or colour-filled box with a 1.5px ink outline and rounded corners, most with a hard shadow. Headings are huge, uppercase and tight; two hold small photo chips. Sections alternate a sticky heading beside a card pile, centred statements, one priced sheet, a row of three plan cards and a two-column visit block with the form. A pill bar with the links and the order button is fixed to the bottom of the screen. Nine colours: lemon holds the page, while the visit section, the Pint Club sheet and one ribbon take gradients or pink. Boxes carry a 1.5px ink outline and a blur-free offset shadow, like stickers, [not generated frosted glass](https://8b.com/templates/not-ai-generated/), and many sit tilted. ## Sections and motion - **Navigation** (navigation): fixed melty. logo pill at the top; fixed bottom bar with opening hours line, five links and Order a pint button (Menu button on phones); bottom bar hides on scroll down; phone overlay. Motion: The bottom bar slides away when you scroll down and returns on a scroll up, and the logo shrinks a little after 60 pixels. - **Plums are becoming sorbet the coldest way to eat October.** (opening): lemon screen: a small question, a big headline with a photo chip, a paragraph and two buttons. Motion: On load the lead line, headline, paragraph and buttons settle into place one after another, and the photo chip in the headline pops; there is no scroll animation here. - **This week in the freezer** (flavours): "This week in the freezer": five flavour cards dealt onto one pile, each with photo, description and tags. Motion: On wide screens the heading stays put while five flavour cards are pinned in one pile, and each next card slides up from below with a tilt, for about three screens of scrolling. - **At six we buy what the market has, cook it into a base, churn it cold and scoop it by noon.** (morning): "Before you’re up, we’re at it.": one big sentence with three photo chips, then four numbered sticker steps. Motion: The three photo chips in the big sentence pop in and the four numbered steps stick on, once, as they reach the screen. - **Will it survive the walk home?** (questions): three big questions from the counter, each with a highlighted phrase that grows into a colour card holding the answer and a photo. Motion: As you scroll, each highlighted phrase grows into the full coloured card and the answer rises into view. - **Cup, cone or a whole pint** (prices): "Cup, cone or a whole pint": a photo of five cones and five priced sticker rows, with toppings. Motion: The cone photo and the five price pills stick on as they reach the screen, once. - **From their field to your cone** (neighbours): "From their field to your cone": two photo stickers that fly in and bump, and a list of eight local suppliers. Motion: Two photos fly in from the sides on scroll, bump and settle. - **Saturday churn school** (school): "Saturday churn school": a kitchen photo, a paragraph, when, who and price, and a booking button. Motion: The title fills in word by word as you scroll, and the photo and the ticket stick on once. - **The Pint Club** (club): "The Pint Club": a paragraph with a tub photo and three plan cards (Solo, Duo, Freezer full) that spread from a stack. Motion: The three plan cards start stacked on the middle one and fan out to their places as you scroll. - **Overheard at the counter** (reviews): "Overheard at the counter": eight short reviews on two ribbons that start crossed like an X, settle to a slight tilt and run in opposite directions. Motion: Two ribbons start crossed like an X and settle to a slight tilt as you scroll, while each runs its reviews sideways in opposite directions, pausing on hover. - **1 Example Street** (visit): visit: the street address as heading, opening hours, phone and email, a cone photo and a booking form. Motion: The hours card, the cone photo and the form stick on once. - **Footer** (footer): footer: two big tile links, three round icon links, a giant melty. wordmark and a copyright line with the Design: 8B credit. Motion: The letters of the big wordmark stretch up from a squashed shape one after another as you scroll. ## Good for - ice cream parlour or gelateria - bakery, dessert cafe or chocolatier with weekly specials - small food producer with workshops and a monthly box - any local shop with a changing menu, by look ## Questions **Does the booking form send me an email?** No. It checks the name and email, shows a thank-you line and clears itself, but nothing leaves the page. Connect Formspree or Netlify Forms, or delete the form and its script. Edit the thank-you line, which promises a reply within a day. **How do I hand it to Claude Code, Cursor or Codex?** Put index.html and AGENTS.md in an empty folder with the curl lines at the start of AGENTS.md, and tell the agent to read AGENTS.md first. Give it the files, not the page address. No file to hand over? Paste the ice cream shop website design prompt below into Lovable or v0, or start from [the ice cream card in Bolt](https://8b.com/templates/for-bolt/). **Which parts break if I change them?** Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists for each script. Set the footer wordmark's --len to the new name's character count. 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 have more or fewer than five flavours?** Yes. The deck reads its cards from the page, so each card needs a photo, name, text and tags; with a single card the deal simply does not run. The [pinned scroll animation](https://8b.com/templates/animated/) grows by about 0.7 of a screen for every extra card, which can feel long on a phone with many flavours. **Can customers order pints or join the club online?** Not as shipped. There is no cart or checkout. The Order a pint button jumps to the club section, and the plan and workshop buttons jump to the form. Point each button at your own ordering or booking page, or keep them as links to the form. **Can I get a site like this without editing code?** Yes, with [8B's AI website builder](https://8b.com/), though it designs a new site rather than this template. You describe the shop in a sentence; designing and restyling are free. Publishing with hosting and 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, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses). - Order a pint button in the nav lead to #club now; point them to your online ordering page, or keep #club for the Pint Club. - Join solo, Join as a duo and Fill my freezer buttons in the Pint Club lead to #visit now; point them to the sign-up or checkout page for each plan. - Book a Saturday button in the churn school lead to #visit now; point them to your workshop booking page. - Cups, cones and pints link in the flavours section, and the birthday booking link in the questions lead to #prices and #visit now; point them to keep them, or point the birthday link at your booking page. - Instagram and TikTok icons and the email icon in the footer lead to the Instagram and TikTok home pages, and a mailto link now; point them to your own profiles and email. - The page loads GSAP's SplitText plugin for the heading fill and the footer wordmark, so it needs the extra script from the CDN. - The flavour deck pins the page for about three screens, which can feel long on short phone screens. - With motion allowed the review bands scroll sideways on their own (paused on hover, focus and when off screen). With reduced motion they stay as wrapped rows, but the bottom bar still hides on scroll and hover effects keep running. - The questions are headings and answers in cards, not native details elements, so they are always open. ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 108+, Safari 16+, Firefox 110+ (it uses container query units, cascade layers, small/dynamic viewport units).