Flower Shop Website Template
Demo brand: WILDROOT · Florist · 26 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this flower shop website template
A complete website for a flower studio that delivers: eight bouquet pages with sizes and prices, a bouquet builder that prices an order live, flower subscriptions, weddings, workshops, a delivery page with a postcode checker, a journal of care guides, an FAQ and a contact form that arrives already filled in. Twenty-six built pages, all driven by content files.
It looks calm and fresh. A pale sage ground, white cards, one deep-green band, and real studio photography of hands trimming stems, tying posies and handing bouquets over carrying all the colour. Bodoni Moda for headings, Jost for everything else, and one garden-rose accent on every button.
Every section answers what someone sending flowers wants to know: can it arrive today, what will it cost with delivery, will it last, and what if nobody is home. The builder shows the same-day cut-off, the delivery fee for the postcode and the total before anything is sent. Motion is one quiet reveal.
The 26 pages you get
- Home
/ - Split hero with the same-day cut-off line, promises, the bouquet grid, the studio band, the four steps from market to door, the bouquet builder, subscription plans, reviews, care guides, FAQ and a closing call to order.
- Bouquets
/bouquets/ - All eight designs with style, price-from and a same-day tag.
- Bouquet pages
/bouquets/…/ - Eight bouquets. Photo gallery, size and price picker, stems included, delivery and wrapping details, a review and related bouquets. "Order" sends the chosen size to the contact form.
- Bouquet builder
/order/ - Size, colour palette, vase, card message, delivery date and postcode, with a live total and the same-day cut-off worked out in UK time. Can be pre-set from a link, e.g. a palette.
- Subscriptions
/subscriptions/ - Weekly, fortnightly and monthly plans with the saving per bouquet, how it works and subscription questions.
- Weddings
/weddings/ - Three packages with starting prices, a photo spread, the four steps from first call to the day, and wedding questions.
- Workshops
/workshops/ - Dated classes with price and places left, a waitlist for full ones, what is included, and gift vouchers.
- Delivery
/delivery/ - A postcode checker, a table of zones, fees, cut-off times and delivery windows, and what happens if something goes wrong.
- About
/about/ - The studio story, the team shown with initials instead of face photos, and what the studio will not compromise on.
- Journal
/journal/ - A lead article and care-guide cards. Add a Markdown file and it appears here.
- Articles
/journal/…/ - Four written pieces: making flowers last, caring for a hand-tied bouquet, what is in season in autumn, and what wedding flowers cost.
- FAQ
/faq/ - Eight questions on cut-off times, fees, freshness and subscriptions, beside a tall photo.
- Contact and orders
/contact/ - Contact details, opening hours and a form with an order section that fills itself from the builder or a bouquet page.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout, written for a delivery florist.
- 404
/404 - Designed, with links back home and to the bouquets.
What is in the build
- A bouquet builder with four sizes, five colour palettes, an optional vase, a card message, date choice and a live price, and it still submits without JavaScript
- A same-day cut-off computed in UK time, with a separate cut-off per delivery zone and no Sunday deliveries
- Delivery zones by postcode prefix, each with its own fee, cut-off and delivery window, set in one file
- Bouquets as content: sizes, prices, stems and photos in one Markdown file per design, with an optional checkout link
- Subscription plan cards that show the saving per bouquet against a one-off order
- Real florist photography with no faces and no brand marks, optimised to AVIF and WebP by Astro
- All studio details in one file, and one accent colour that rebrands the whole site
- Vitest and Playwright suites included, with tests for the builder that fix the clock to check the cut-off
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- Pale sage ground and white cards with one deep-green band, Bodoni Moda over Jost, bright hands-only florist studio photography, and one garden-rose accent.
- The mechanic
- A bouquet builder shows the live total, the same-day cut-off in UK time and the delivery fee by postcode, then pre-fills the order form; eight bouquet pages, subscription plans, wedding packages and dated workshops. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Florist hands trimming, tying and handing over bouquets
- Type & palette
- Bodoni Moda · Jost
-
#eef1ea#1b2520#a8445e
Who it is for
Built for florists and flower studios that deliver locally and sell bouquets, subscriptions, wedding work and workshops. It also fits a plant shop, a flower farm with a delivery round, or a gift business with same-day delivery. It suits a studio that wants orders arriving with the size, date and address already filled in, without running a full online shop.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Can customers pay online?
Not out of the box: orders arrive through the contact form so you can confirm stems and send a payment link. Add a Stripe Payment Link or Shopify Buy Button to any bouquet and its Order button goes straight to checkout. The README shows how.
How do I set my delivery area and cut-off time?
Zones, postcode prefixes, fees, cut-off hours and delivery windows are one list in src/data/site.ts. The builder, the delivery page, the postcode checker and the footer all read from it.
We are not in the UK. Does the postcode check still work?
It matches the first part of what is typed against your zone prefixes, so it works for any system with an area prefix. Change the prefixes and the time zone in the same file; for other formats, adjust one small function in the builder script.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its source in LICENSING.md. They were checked for faces and brand marks on wrapping, buckets and vases.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More retail & product templates
ORRISHAW
Perfumer / fragrance house
Loud
Imagery
OSMUND
Watchmaker
Loud
Imagery
MYRSTAD
Wireless hi-fi / multi-room audio
Loud
Imagery
KILNMARSH ENAMELWARE
Enamelware homeware store
Loud
Imagery