Kilnworks — Coffee Roastery Store Ecommerce Template

Kilnworks is an HTML storefront template for a coffee roastery, tea company or small-batch food brand. Product cards lead with origin, process and roast date, and the product page puts grind and size choices first — the decisions coffee buyers actually make.

Six pages ship ready to edit: home, shop, product with variants, cart, about and contact. The sand palette and grotesk display feel warm and crafted without looking rustic.

• A coffee roastery store moving off a marketplace to its own site
• Makers who need a storefront front end for their commerce platform
• Agencies building shops for small brands
• Anyone who wants product pages with variants done properly

• Promo bar, header with cart action and mobile menu
• Storefront hero, category tiles and product grid
• Product page with gallery thumbnails, colour swatches, size variants and quantity stepper
• Cart page with summary and checkout button
• Trust row and about page
• Generated product artwork placeholders sized for real photography
• Dependency-free JavaScript for variants, thumbnails and quantity
• Responsive grid from one to four columns

• 6 HTML pages
• css/style.css design system and css/store.css
• js/main.js progressive enhancement
• README.txt with setup notes

• Any modern browser
• Static hosting (Netlify, Vercel, S3, cPanel)
• Works without a build step

• A text editor
• A static host or any web server
• No build tools required

1. Unzip and open index.html — it works from a folder

2. Change the design tokens at the top of css/style.css

3. Replace sample text, contact details and prices

4. Swap the generated artwork tiles for your photography

5. Connect the form in js/main.js to your form service or backend

• All colours, radius and fonts are CSS custom properties
• Sections are self-contained blocks that can be reordered or removed
• Icons are inline SVG; swap any glyph in place
• Swap the font pairing by changing one Google Fonts link

• Personal — for your own private, non-commercial projects. Not for client work.
• Commercial — for one commercial project or one client project.
• Agency — for multiple client projects, up to the limits stated on this page.

No tier permits reselling or redistributing the files themselves.

Questions about Kilnworks are handled through your DistroSource account — open a support ticket from the order and include your order number.