Free ice cream shop website template
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: melty.md, data: melty.json
About this ice cream shop website template
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.
At a glance, October 2026. 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.
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 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.
Good for:
Turn the ice cream 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/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.mdPrompt for the agent:
Read AGENTS.md, then edit index.html. Make this the site for <my shop: name, address, opening hours, this week's flavours with diet tags, prices, workshop day and price, monthly plans with prices and collection or delivery, suppliers, how people book>. 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.In a terminal
npx degit 8bsite/ice-cream-shop-website-template my-siteIce 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.
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.Ice cream shop website design and motion
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 gradientFonts
- 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, and many sit tilted.
Every value of this ice cream 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 ice cream shop website page
- NavigationFixed 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
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.Lemon screen: a small question, a big headline with a photo chip, a paragraph and two buttons
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"This week in the freezer": five flavour cards dealt onto one pile, each with photo, description and tags
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."Before you’re up, we’re at it.": one big sentence with three photo chips, then four numbered sticker steps
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?Three big questions from the counter, each with a highlighted phrase that grows into a colour card holding the answer and a photo
As you scroll, each highlighted phrase grows into the full coloured card and the answer rises into view.
- Cup, cone or a whole pint"Cup, cone or a whole pint": a photo of five cones and five priced sticker rows, with toppings
The cone photo and the five price pills stick on as they reach the screen, once.
- From their field to your cone"From their field to your cone": two photo stickers that fly in and bump, and a list of eight local suppliers
Two photos fly in from the sides on scroll, bump and settle.
- Saturday churn school"Saturday churn school": a kitchen photo, a paragraph, when, who and price, and a booking button
The title fills in word by word as you scroll, and the photo and the ticket stick on once.
- The Pint Club"The Pint Club": a paragraph with a tub photo and three plan cards (Solo, Duo, Freezer full) that spread from a stack
The three plan cards start stacked on the middle one and fan out to their places as you scroll.
- Overheard at the counter"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
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 StreetVisit: the street address as heading, opening hours, phone and email, a cone photo and a booking form
The hours card, the cone photo and the form stick on once.
- FooterFooter: two big tile links, three round icon links, a giant melty. wordmark and a copyright line with the Design: 8B credit
The letters of the big wordmark stretch up from a squashed shape one after another as you scroll.
Before you publish the ice cream shop 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.
- Order a pint button in the nav lead to
#clubnow; 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
#visitnow; point them to the sign-up or checkout page for each plan. - Book a Saturday button in the churn school lead to
#visitnow; 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 #visitnow; 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 linknow; 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.
Questions about this ice cream shop website template
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.
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 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, 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.
