Freeframe
Store10 pages · 7 downloads · Free

Roast

A bold shop for a specialty coffee roaster, with a subscription builder, brew guides and a working cart.

Stack
v1.0.1 changelog
DocsLive demo Download .zip169 KB

About this template

Roast is a storefront for First Crack, a fictional specialty coffee roaster. It ships with a filterable coffee shop, product pages with bag sizes, grinds, tasting notes and brew recipes, a subscription builder that shows the price per cup and the next delivery dates, a cart drawer, a three-step demo checkout, brew guides with a recipe scaler and a wholesale enquiry form. Coffees live in one JavaScript array and every price is worked out from it.

Features

  • Shop filters for roast, origin and process, with sort, live count and shareable URLs
  • Product pages with bag sizes, grinds, tasting profile and a brew recipe per coffee
  • Subscription builder with price per cup, monthly estimate and next delivery dates
  • Cart drawer with quantities, free-shipping progress and a focus trap
  • Cart and plan saved in localStorage, validated and repaired on every read
  • Three-step checkout with inline validation and card formatting (demo only)
  • Brew guides in accessible tabs with a recipe scaler
  • Wholesale volume estimator and enquiry form
  • Coffee bags and beans drawn in SVG from the product data
  • Accessible mobile menu, skip link, reduced-motion support and scroll reveals

Pages included

Quick start

unzip roast.zip && cd roastopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Roast documentation →

Changelog

  1. v1.0.1

    Fixed

    • The cart now works when the browser blocks localStorage (in a sandboxed iframe, like the freeframe.dev demo, or with strict privacy settings): the state is kept in memory for the page view. Before, adding a coffee left the badge at 0 and the cart empty.

  2. v1.0.0

    Added

    • Initial release with 10 pages: Home, Shop, Product, Subscribe, Checkout, Brew guides, Wholesale, Our sourcing, Contact & FAQ, 404.
    • Shop filters for roast, origin and process, with sort, live count and shareable URLs
    • Product pages with bag sizes, grinds, tasting profile and a brew recipe per coffee
    • Subscription builder with price per cup, monthly estimate and next delivery dates
    • Cart drawer with quantities, free-shipping progress and a focus trap
    • Cart and plan saved in localStorage, validated and repaired on every read
    • Three-step checkout with inline validation and card formatting (demo only)
    • Brew guides in accessible tabs with a recipe scaler
    • Wholesale volume estimator and enquiry form
    • Coffee bags and beans drawn in SVG from the product data
    • Accessible mobile menu, skip link, reduced-motion support and scroll reveals
    • Full documentation in DOCS.md.

More templates