About this template

What Ladle is

Ladle is a complete website for a food brand that sells what it makes: sauces and pantry jars, a bakery's packed goods, a producer with shops that stock it, or a weekly supper box. It is built on one real rule, the weekly batch. The header and the first screen count down to the order cut-off in the kitchen's own time zone, name the batch, the cook day and the delivery day, and every product shows how many jars are left, with Few left and Sold out states that come back on their own date.

It has 17 page types: home, a shop with type and diet filters, a product page with ingredients, allergens, nutrition per 100 g and keeping times, sets with what is inside and the saving, a supper box with a plan picker and price per serving, recipes linked to the jars, a stockist finder by city, the kitchen, wholesale with a trade list and form, delivery with a postcode checker, zones, fees and minimums, a full allergen table, questions, contact, a bag and checkout with delivery or pickup and a payment-link hand-off, privacy, terms and a 404.

Every page is designed in light and in dark, with a toggle in the header, and the layout adapts to desktop, tablet and phone, where the batch countdown and the bag stay one thumb away. The kitchen, its shops and its prices are invented, and the photographs are for demonstration only, so replace them with your own before you publish.

Last updated

What's included

7 pages, ready to fill in

  1. 01HomeBatch hero with the cut-off, the batch week, all jars, a taste finder, the supper box picker, sets, a postcode checker, stockists, recipes, the kitchen and questions
  2. 02Shop and productFilters by type and diet, in-batch only and sort; each jar with price, heat, jars left, ingredients, allergens, nutrition and keeping
  3. 03Sets and supper boxSets named for who eats them with the saving; a plan picker for two or four people and this week's suppers
  4. 04Recipes and recipeTime, servings and difficulty, filtered by jar, each linked to the jars it uses
  5. 05Where to buy and wholesaleShops by city with search and directions; trade terms, a trade price list and an enquiry form
  6. 06Delivery, allergens, questionsPostcode checker, zones, fees and minimums, kitchen pickup; every jar against every allergen; the common questions
  7. 07Bag, kitchen, contact, legal, 404Checkout with delivery or pickup and a payment link; the story and team; a contact form; privacy and terms; a sold-out 404

Features

  • Cut-off, cook day and delivery day computed in one time zone
  • Products, stock, allergens and nutrition in one typed file
  • Bag stored in the browser, payment through any checkout link
  • Pack shots on tinted tiles, from any white-ground photo
  • Light and dark mode with a toggle
  • Responsive, with the batch and the bag pinned on phones
  • Jars, recipes, stockists and suppers on the Framer CMS

Code version

  • React 19
  • Vite
  • Tailwind CSS 4
  • TypeScript
  • Motion
  • React Router
  • Content in typed files

Screens

A closer look

Taken from the live demo, in light and in dark, on desktop and on a phone.

Ladle template. Home: the batch, the live cut-off and the delivery day.
LightHome: the batch, the live cut-off and the delivery day.
Ladle template. Home in dark mode.
DarkHome in dark mode.
Ladle template. This batch: price, heat and jars left on every jar.
LightThis batch: price, heat and jars left on every jar.
Ladle template. Find yours: two dials light the two nearest jars.
DarkFind yours: two dials light the two nearest jars.
Ladle template. The shop with type and diet filters.
LightThe shop with type and diet filters.
Ladle template. A product with heat, stock, ingredients and allergens.
DarkA product with heat, stock, ingredients and allergens.
Ladle template. The supper box picker with price per serving.
LightThe supper box picker with price per serving.
Ladle template. Where to buy, by city, with search.
DarkWhere to buy, by city, with search.
Ladle template. Every jar against every allergen.
LightEvery jar against every allergen.
Ladle template. A recipe with time, servings and the jars it uses.
DarkA recipe with time, servings and the jars it uses.
Ladle template. Home on a phone, with the countdown pinned.
Ladle template. A product on a phone, dark mode.
PhoneHome on a phone, with the countdown pinned. A product on a phone, dark mode.

Where to get it

Three versions, one design

Pick the one that matches how you build. The pages and the design are the same in each.

  • Framer templateRemix it into your Framer account and edit on the canvas. Projects and journal posts run on the Framer CMS.

    Free on FramerFramer Marketplace

  • Code on Digital Silk RouteThe full source: React 19, Vite, Tailwind CSS 4, TypeScript. Host it anywhere and change anything.

    $5one payment

    Buy theme · $5
  • XOXI themeA theme for your XOXI profile. Live on the XOXI website now; the iOS and Android app gets it with the next app update.

    Includedfor Pro and Business+ members

    Get it with Pro plan on XOXI

Want to see it first? View demo

Want one made for you?

Start with a free 30-minute call. You get a written plan and a fixed quote before any work begins.

Book a call

Fixed quote. You own everything we make.

The Black Momento online store, built by Victor Studios
Client work, designed and built by us