Violetta Studio ◆ Next.js 16 template ◆ Full source
Next.js 16 Bakery and Food Shop Template with Cart — Levain
Cakes ◆ Pastry ◆ Bread ◆ Cookies
A bakery storefront that actually sells: a filterable menu, product pages, a cart drawer and a numbered checkout — running on a self-contained local cart out of the box, and on Shopify, BigCommerce, Snipcart or Stripe the moment you set one environment variable.
30-day money back guarantee. Email me and you get a full refund — no questions, no forms.
Taste the live demo ↗Three stocks, two schemes.
Palette and light/dark are separate switches in Levain, so toggling the scheme never throws away the palette. Change either one and this page changes with it — the blocks driving it were lifted out of src/styles/themes.css, so this is not a picture of the themes.
Read live from the page you are on. Card surfaces are their own tokens (--card-bg, --card-fg, --card-line) precisely so a product card stays readable when the room goes dark. Copy a block, rename the data-theme, and you have a fourth palette.
Off the card
Now the part that is not a menu.
A carte is a pleasant way to list what is in the box. But what you are buying is the ordering flow, so here it is end to end, in the order a customer walks it.
Menu
Category pills, a dietary sidebar with live counts, a price range and a sort control. Filters live in the left sidebar on desktop and collapse to scrollable tabs on a phone.
Product
Thumbnail rail, size selector, allergen chips, an availability badge (Bake-to-order · 48h) and customer reviews. Add to cart from here or from the card in the grid.
Cart
- Cart drawerslide-in
- Dedicated /cartpage
- Quantity + removeyes
- Promo codeyes
- Currency5
The one step with no screenshot on this card, because it is a drawer: it slides in over whatever page you were on, and there is a full /cart page for the same state. Totals follow the currency picked in the nav.
Checkout
Numbered steps — contact, delivery (pickup at the workshop or courier), date and time from a calendar with closed days, then payment — beside a summary that stays live as the order changes.
Out of the box the cart is a self-contained local demo: no account, no keys, nothing to sign up for — you can click the whole flow the minute it installs. Set NEXT_PUBLIC_COMMERCE_PROVIDER to shopify, bigcommerce, snipcart or stripe and the same interface talks to a real backend. The adapters share one signature, so nothing in the UI changes.
Front of house
-
Sticky WhatsApp widget4 langs
A floating button plus a modal of prefilled quick-messages that change with the visitor’s locale. One tap and the conversation is already written.
-
Search modalkeyboard
Live filtering across the menu with full keyboard navigation — open, type, arrow, enter.
-
Currency picker5
USD, EUR, GBP, JPY and BRL. The choice is a cookie, so every price on the site follows it, checkout summary included.
-
Language switchEN ES FR PT
Real routed locales —
/en,/es,/fr,/pt— not a client-side string swap. -
Wishlist & account5 screens
Saved items, plus login, register, forgot-password and reset-password screens on typed schemas, ready for the auth provider of your choice.
-
Navbar variants3
Three navbar layouts, including the overlay nav that sits transparent over the hero and solidifies on scroll.
-
Contact form3 adapters
React Hook Form and toasts in front; Resend, Formspree and Web3Forms sit commented in
src/lib, ready to uncomment. -
TweakPaneldeletable
A preview panel for auditioning theme, scheme, fonts, section colours, logo mode, language and layout variants without editing code. It ships behind one flag and the docs tell you how to strip it.
The menu
-
Filterable menu3 axes
Category, dietary tag and price range, with a sort control and counts that update as you narrow.
-
Dietary & allergen tags10
Vegan, vegetarian, gluten-free, dairy-free, nut-free and no-refined-sugar, plus four “contains” warnings in a different tone.
-
Product pagesPDP
Gallery rail, sizes, allergens, availability chip, reviews and Product structured data on every one.
-
Pinch-zoom gallery8 shots
Pinch and pan, swipe, fullscreen and keyboard controls, with a share and download toolbar.
-
Cart drawer & cart page2 surfaces
Same state, two places to reach it. Quantities, removal, promo code and currency-aware totals.
-
Checkout4 steps
Contact, delivery, date and time, payment — then an order-received page with a receipt saved to the device.
-
Reviewsstars
Per-product ratings and review copy, kept in the same config file as everything else.
-
The rest of the shop11 more
Gift cards, locations, wholesale, press, FAQ, about, contact, gallery, changelog, in-app docs and a components gallery — all built, all linked, all deletable.
The kitchen
-
One config filesite.ts
Name, hours, address, WhatsApp number, categories, products, prices, testimonials, FAQ, changelog. The rest of the codebase reads from it, so a rename is never a search-and-replace.
-
Three themesthemes.css
Warm & Organic, Clean White, Dark & Moody, each with a light and a dark scheme, each with its own card-surface tokens.
-
Section colour overrides5 in the panel, 11 in CSS
Recolour any band of the page — topbar, header, hero, categories, featured, story, testimonials, footer — without touching the palette underneath.
-
Brand colour tokens7
Gold, gold light, forest deep, forest, mint, cream and ink, every one exposed as a colour input in the panel.
-
Layout variants3 each
Alternate layouts for the navbar and each home band, auditioned at runtime and then pinned in the config.
-
Commerce adapters1 env var
Local demo, Shopify, BigCommerce, Snipcart, Stripe. One signature, one switch, no UI rewrite.
-
Right-to-leftRTL
Logical CSS properties, mirrored icons and direction-aware animation through the cart drawer and the sidebar filters. Set
diron a locale and the shop flips. -
SEO & structured dataJSON-LD
Bakery and Product schema, generated Open Graph images, sitemap, robots and an RSS feed.
-
TestsVitest
Specs across every commerce adapter, the config, the utilities, and an i18n coverage test that fails if a key exists in one locale and not the others.
-
Documentation9 files
README, CUSTOMIZATION, DEPLOY, PRODUCTION, PACKAGE-MANAGER and LICENSE, plus a guide each for Sanity, Strapi and Contentful.
Prix fixe
$69
Every line on this card. One payment, the complete source, no locked tier and no subscription.
Order Next.js 16 Bakery and Food Shop Template with Cart — Levain30-day money back guarantee. Email me and you get a full refund — no questions, no forms.
A gallery worth photographing for.
Bakeries live on photography, so the viewer is the one piece nobody should have to build twice.
The whole specification.
| Framework | Next.js 16 · App Router · React 19 |
|---|---|
| Language | TypeScript, strict mode |
| Styling | Tailwind v4 over the CSS custom properties this page is running on |
| Requirements | Node.js 20+ · npm, pnpm or bun |
| Cart | Self-contained local demo by default; Shopify, BigCommerce, Snipcart and Stripe adapters selected with NEXT_PUBLIC_COMMERCE_PROVIDER
|
| Pages | Home, menu, product pages, cart, checkout and order-received, gallery, about, contact, FAQ, locations, wholesale, gift cards, press, changelog, docs, account (login, register, password reset), components gallery |
| Themes | Warm & Organic, Clean White, Dark & Moody · each with a light and a dark scheme · switchable at runtime |
| Type | Four display / body pairs plus a script face for the accent lines — Playfair, Cormorant, Fraunces, DM Serif |
| Languages | English, Spanish, French, Portuguese — interface and content, WhatsApp quick-messages included |
| Right-to-left | Logical CSS, mirrored icons, direction-aware animation. Set dir on a locale and the layout flips. |
| Images | Eight product and hero PNGs, so the whole flow previews before you shoot a thing |
| SEO | JSON-LD Bakery + Product, generated Open Graph images, sitemap, robots, RSS |
| Accessibility | Visible focus, skip link, keyboard-driven lightbox and search, prefers-reduced-motion respected |
| Tests | Vitest — commerce adapters, config, utilities, i18n coverage. Run npm test. |
| Docs | README, CUSTOMIZATION, DEPLOY, PRODUCTION, PACKAGE-MANAGER, LICENSE, plus SANITY, STRAPI and CONTENTFUL guides |
| Licence | Single use — one purchase, one deployed project. Multi-use available, just ask. |
| Support | hello@violettadev.com |
Questions.
What actually lands in my downloads?
A ZIP with the complete source. Unzip, npm install, npm run dev, and the shop is at localhost:3003. Nothing minified, nothing held back for a pro tier.
Does the checkout take real money?
Not until you connect a processor — and that is deliberate. Out of the box the cart is a local demo with no keys and no account, so you can click the entire flow on day one. The Shopify, BigCommerce, Snipcart and Stripe adapters ship in src/lib/commerce; one environment variable picks the one you want.
I run a café, not a bakery. Does it still fit?
Yes. Categories, products, dietary tags, prices, opening hours and pickup rules all live in the config file — nothing about cakes is hardcoded. It works for a patisserie, a deli, a coffee roaster or any small food business that takes orders.
Can I build a client site with it?
Yes. The licence covers one deployed project per purchase, so a client site counts. Building several? Email hello@violettadev.com and we will sort out multi-use.
Are the four languages real, or machine output?
Real. English, Spanish, French and Portuguese are written out in messages/ — product copy, WhatsApp quick-messages and all — and a test fails if a key exists in one locale but is missing from another.
Do I need a CMS?
No. Content lives in a typed config file: edit, commit, deploy. If you outgrow that, the Sanity, Strapi and Contentful adapters share the same function signatures, so swapping one in is an import change rather than a rewrite.
How much Next.js do I need to know?
Enough to run npm install. Changing the bakery’s name, products, prices and colours takes no framework knowledge — CUSTOMIZATION.md walks through it. Restructuring pages is where App Router familiarity starts to help.
Something breaks. Then what?
Email hello@violettadev.com. I wrote every line of it and I answer my own support.
Who makes this?
Violetta Studio — a one-person shop building production Next.js templates. The rest of the catalogue is at violettadev.com ↗.
when you are ready.
A bakery storefront that already sells, already speaks four languages, and is yours to take apart.
30-day money back guarantee. Email me and you get a full refund — no questions, no forms.
Open the live demo ↗