AI ready Refreshed

Florist Website Template

Name: Florist
Brand: GSAP Vault
Price: 29.00 GBP
Availability: InStock

£29 View live demo or the whole Vault, £79.20

Includes the original v1 design as a separate download.

A five-page florist website template on one saturated colour: the shop's name runs wall to wall under a jug of flowers shot on paper of the same blue, the first screen splits ordering from weddings, the bunch page builds the bouquet stem by stem, and one order slip follows the visitor across every page. Re-point it to a flower shop, a wedding florist, a plant shop, a cake maker or a candle maker.

ScrollTriggerDraggable Lenis advanced

21 more details

kinetic-typographyclip-path-revealhover-effectscroll-revealstaggerparallaxdragdraggablereorderkeyboard-reorderfilter-chipscrossfadecount-animationdialog-animationfocus-managementlocal-storageview-transitionskeyboard-navigationtouch-gesturesprogressive-enhancement 4 colour palettes

Colour

Updated 24 October 2026

About this template

A complete five-page site for a flower shop that sells bunches every day, does weddings and runs evening workshops. Pell & Daughter is the worked example: a mother-and-daughter shop on Leith Walk in Edinburgh, with flowers down from a grower in Fife twice a week, one wedding a weekend and eight seats round the big table on Thursdays.

Read the full template overview

The whole site stands on one saturated delphinium blue, and every flower that sits on the page was photographed on paper of that same blue, so the bunches stand on the page with no frame round them. The home page puts the shop's name across the full width of the first screen with a jug of flowers standing on its capitals, and splits the two reasons people come in, ordering flowers and planning a wedding, either side of it. Pointing at either path wipes its own flowers in over the jug.

Each page has something to handle. Today's flowers is set as a menu with dotted leaders and size prices, and the bunch you point at appears on the blue beside the list. The bunch page builds the bouquet stem by stem in a fan: choose nine, fifteen or twenty-one stems, pick any stem and swap it for another variety, and drag stems through the bunch. Weddings is a pile of photographs you can pick up, move and bring to the front, above a calendar of free Saturdays that fills the enquiry form. Workshops shows each session's eight seats as marks along a table that fill as you book.

Everything you order lands on one slip that slides in from the right on every page and remembers itself in the browser. Change the colour tokens to the colour of your own backdrop, shoot your stock on it, and the same five pages suit a plant shop, a cake maker or a candle maker.

What's included

15 items

Five pages: home, today's flowers, a product page, weddings and events, workshops
A wordmark fitted wall to wall across the first screen, with the hero photograph placed so the jug stands on its capitals
A two-path hero: Order flowers and Plan your wedding, each wiping its own flowers in over the jug on hover or focus
One saturated ground colour, with every product photograph cut out so it stands on the page with a soft shadow and no box
Four ready colourways (delphinium, poppy, sage, butter), each a saturated ground with its own ink and accent, switched with one attribute
A menu-style flowers page with size prices, filter chips and a photograph that follows the row you point at
A bunch builder: nine, fifteen or twenty-one cut-out stems fanned from one point, swappable and reorderable
One-off or every-other-Friday pricing in one control, a live card tag, and a day picker that respects the 1pm cut-off and Sunday closing
A pile of wedding photographs you can drag, bring forward and read, with a keyboard path
A calendar of free and taken Saturdays that fills the wedding enquiry form
Workshop cards whose eight seats fill as seats go on the slip
One order slip across every page, saved in the browser, sent as a prefilled email
A live same-day cut-off clock in the shop's own time zone
A designed phone menu, no-JS fallbacks on every page, and a complete reduced-motion state
Self-hosted fonts, baked WebP photographs with credits, and measured contrast in the token block

Perfect for

5 use cases

Flower shops that sell bunches daily and take wedding and event work
Wedding florists who also run classes or a subscription
Plant shops, garden centres and nurseries with a weekly range and workshops
Cake makers and bakeries: today's cakes, wedding cakes, decorating classes
Candle, soap and ceramics makers with a shop, commissions and making evenings

How it works

6 sections

One colour, and photographs that match it

The page ground is one token, and it was sampled from the paper behind the hero photograph rather than chosen first. Every flower photograph that sits directly on the page was shot on that paper and then cut out of it, keeping only a soft contact shadow, so the bunches stand on the page itself with no box around them. Documentary photographs, such as weddings and workshops, are the only framed rectangles. To make it yours, shoot your stock on one backdrop and set the ground token to the backdrop's colour.

The wordmark and the jug

The shop's name always fills the width of the page, and on phones each word fills its own line. The hero photograph sits so the jug's foot rests on the top of the capitals, at any width and with any display face you choose. Two settings on the photograph say where its foot is and how wide it may grow. The two paths either side carry their own photographs, which wipe in from their own side on a fine pointer or on keyboard focus.

The bunch, stem by stem

The bunch page fans cut-out stems from a single point at the tie, the way a bunch is held. Choosing a size adds or drops stems one at a time from a default mix that you set in one list in the script, and the price and the grouped list follow. Pressing a stem picks it; pressing a variety on the left swaps it. A mouse can drag a stem sideways through the bunch, and the arrow buttons in the list do the same from the keyboard or on a phone. The whole bunch, the frequency, the card and the day go on the slip as one line.

Weddings you can pick up

The wedding photographs are placed by hand, and each one's position, width and tilt are editable in the markup. On wide screens each one can be dragged within the pile and brought to the front to show its caption; arrow keys move a focused photograph, and a button puts them all back. Three depths drift at slightly different speeds as the page scrolls. On narrow screens, with reduced motion's parallax off, or without JavaScript, the pile becomes an offset two-column stack with every caption showing.

One slip on every page

Every Add button, the bunch builder, the standing order and the workshop seat steppers write to one order slip. It slides in from the right, keeps keyboard focus inside while open, and closes on Escape or a click outside it. The slip is saved in the visitor's own browser, so it survives moving between pages and reloading. Sending it opens an email with every line, the total and the visitor's details written out; nothing is charged or sent from the page.

Plain pages that still feel joined

Each page is an ordinary HTML file that runs its own features on load, so there is no router and no teardown to manage. Browsers that support cross-document view transitions crossfade between pages and hold the brand still in the corner. Without JavaScript every page is a complete document: controls that need the script are hidden, the menu becomes a link to the page list in the footer, and each page ends with a plain section that takes an order by email or phone.

Plugins ScrollTrigger, Draggable

Difficulty Advanced

Smooth scroll Lenis integration

Colour palettes 4 ready-made palettes, each measured for AA contrast. Switch with one attribute, or copy the values you want into :root. Try them in the preview above.

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo (5 pages, lowest score shown), from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

What else could I use this florist design for?

Anything sold daily, made to order and taught in the evening. A plant shop swaps bunches for plants on a coloured board and workshops for terrarium nights; a cake maker swaps them for today's cakes, wedding cakes and decorating classes; a candle maker for scents, custom favours and pouring evenings. Keep one backdrop colour for the product photographs, set the ground token to it, and the five pages carry over.

Do my product photos need a coloured background?

The products on the page are cut-outs with transparent backgrounds and a soft shadow, so they stand on any ground colour. Shoot yours on one plain backdrop, which makes them easy to cut out, and set the ground token to a colour that suits them. A photograph with its background left in will show as a rectangle, so cut it out first. The bunch builder's stems are cut-outs too.

Does the order slip take payment?

No. It is a front end only. Bunches, the standing order and workshop seats all land on one slip, which is saved in the visitor's browser and sent as a prefilled email to the address in the script's settings. Nothing is charged or stored on a server. To take real orders, point the Send button at your checkout, a Stripe payment link per item, or a form service such as Formspree that forwards the slip to you.

What happens to the wedding enquiry form?

It collects names, an email address, the date, guest numbers, the venue and a message, and opens the visitor's email client with them filled in. Nothing is sent from the page or kept anywhere. Point the form's action at Formspree, Netlify Forms or your CRM to receive enquiries directly. The taken Saturdays are example data in one list at the top of script.js; replace it with your own bookings.

How do I change the stems in the bunch builder?

Each variety is one button in the rail on the bunch page with a name and a cut-out photograph. Add or replace buttons, and edit the default mix, which is one ordered list of variety names at the top of script.js: the first nine, fifteen or twenty-one entries make the three sizes. The sizes and their prices are radio inputs in the product form, so changing a price is one attribute.

How do I change the same-day cut-off and opening days?

The shop's time zone, the cut-off hour and the closed day are three values in the settings block at the top of script.js. The clock text on every page, the day picker on the bunch page and the strip under the flowers heading all read from them, so a 3pm cut-off or a Monday closing is one edit each. Opening hours in the footer are plain text in each page.

Can I add more workshop sessions or change the seat count?

Yes. A session is one list item with its date, price, seat count and seats already taken in data attributes. Copy one, change the photograph and the text, and its row of seat marks and its stepper are drawn from those attributes. Set the taken count to the seat count and the card shows sold out with a waiting-list link instead of a stepper.

Paid template

Purchase to unlock the code.

Buying Florist opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£29 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

Open index.html in a browser, or serve the folder with any static server. There is no build step.
The pages are index.html, flowers.html, bunch.html, weddings.html and workshops.html. They share assets/style.css and assets/script.js.
Edit the copy in the HTML, the shop settings at the top of assets/script.js, and the colour tokens at the top of assets/style.css.

Using It With Your Own Design

The design rests on one idea: the page is the colour of the paper the products were photographed on. Shoot your products on one plain backdrop, sample a corner of a photograph, and set --ground (and --ground-rgb) to that colour. Then re-measure the ink and accent pairs listed in the :root comment. Everything else (the wordmark, the menu board, the fan, the photo pile) works for any product sold daily, made to order and taught in the evening: plants, cakes, candles, ceramics.

Products that stand directly on the page are bundled as cut-outs: transparent WebP files with the backdrop removed and a soft contact shadow kept, so they sit on any ground colour with no box around them. Replace one with your own cut-out at a similar size; a photograph with its background left in will show as a rectangle. Documentary photographs (weddings, workshops) are ordinary framed images.

Pages and Configuration

Settings in `assets/script.js`

The SHOP block holds the order email, the shop's time zone, the same-day cut-off hour, the closed day of the week and the browser storage key for the slip. TAKEN_SATURDAYS lists booked wedding dates. BUNCH_PATTERN is the default mix of the bunch builder, in the order stems go in.

Every page

The strip at the top is a single link; change its text and target.
Navigation: the desktop links sit in the header. On phones a Menu button opens a full-height sheet listing every page with a one-line description; the list is in each page's .menu__list. Without JavaScript the Menu button is replaced by a Pages link to the page list in the footer.
The order slip (#slip) is shared by every page. Any button with data-add puts a line on it: data-id, data-name, data-detail and data-price (in pence). A <select data-size> in the same row overrides the price and detail with the chosen option's value and data-detail. The slip is saved in the visitor's browser (localStorage) and sent as a prefilled email to SHOP.email. It takes no payment.
data-cutoff on any element fills it with the live same-day cut-off message; data-today with today's date in the shop's time zone.

Home (`index.html`)

Hero: the wordmark fills the page width; the photograph is placed so the jug's foot rests on the top of the letters. On .hero__media, data-foot is how far down the photograph the foot sits (0 to 1) and data-max caps its width as a share of the hero. The two paths each name a photograph (data-hero-swap="order" / "wedding") that wipes in on hover or keyboard focus; delete either image to turn its preview off.
Today's shelf: a sideways row of .shelf__items with Add buttons.
Every other Friday: twelve Fridays from the coming one are drawn by the script; picking one lights the alternates and updates the Add button's detail.
Workshop cards read their seat marks from data-seats and data-taken.

Today's flowers (`flowers.html`)

Each .dish is one menu row. data-tags (space separated: today, standing, table) feeds the filter chips; data-plate names the photograph in .board__plate that appears beside the list while the row is hovered or focused. On narrow screens, and without JavaScript, each row shows its own photograph instead.

The Thursday bunch (`bunch.html`)

Product form: the size radios carry data-price (pence) and data-word; "Every other Friday" takes £5 off. The gallery thumbnails carry data-view and data-alt.
The fan: each .rail__stem is one variety (data-stem, data-name, a cut-out photograph). Choosing a size builds the bunch from BUNCH_PATTERN; pressing a stem in the fan picks it and pressing a variety swaps it. Drag a stem sideways with a mouse, or use the arrows in the list, to move a variety through the bunch.
Card and day: the tag repeats the message as you type; the day picker shows the next seven days, closes Sundays and today after the cut-off.

Weddings and events (`weddings.html`)

The photo pile: each .snap is placed with --x, --y, --w and --r (rotation) in its style, inside a .cluster__layer whose data-depth sets how much it drifts on scroll. On screens wider than 900px the photographs can be dragged and brought to the front; arrow keys move a focused one; "Put them back" resets. Narrower screens get a two-column stack.
Saturdays: fifteen months from next month; taken dates come from TAKEN_SATURDAYS plus an example fill in takenSaturday() that you should delete. Picking a free Saturday fills the form's date.
Enquiry form: opens an email with the fields filled in. Point its action at Formspree, Netlify Forms or your CRM and remove the submit handler in initEnquiry() to receive enquiries directly.

Workshops (`workshops.html`)

Each .session with data-bookable gets a seat stepper that writes seat-<id> lines to the slip, up to the free seats. Set data-taken equal to data-seats for a sold-out session; its mailto waiting-list link stays.

Palette

Token	Value	Use
`--ground`	`#5A82D6`	Every page; sampled from the hero photograph's paper
`--ground-lift`	`#86A3EC`	Paler bands for rhythm
`--ground-deep`	`#14204F`	Footer, phone menu, wedding enquiry band
`--ink`	`#0A0F2C`	All text on the grounds (5.01:1 on the ground)
`--paper`	`#F5F0E6`	The slip, forms, the card tag
`--link-on-paper`	`#3B4FA8`	Links on paper
`--accent`	`#FF7A45`	The strip, Add buttons, selected states; always with ink text and an ink outline

Ink is never used with transparency on the ground: below full strength it falls under 4.5:1. Measured pairs are recorded in the :root comment.

Palettes

Four colourways ship in assets/style.css. Each is one saturated ground with its own ink, bands and accent; the faces stay the same. Set data-palette on <html> (for example <html lang="en-GB" data-palette="sage">) on every page, or copy one block's values into :root and delete the [data-palette] blocks.

Palette	`data-palette`	Ground	Ink	Accent	Display face	Ink on ground
Delphinium (default)	none	`#5A82D6`	`#0A0F2C`	`#FF7A45`	Fraunces	5.01:1
Poppy	`poppy`	`#E8573B`	`#1C0503`	`#FFD15C`	Fraunces	5.46:1
Sage	`sage`	`#8EAA8A`	`#0D1A0E`	`#FF7A45`	Fraunces	7.06:1
Butter	`butter`	`#F2C94C`	`#231803`	`#5A82D6`	Fraunces	11.00:1

The product photographs are cut-outs, so they stand on any of the four. The portrait of the owners and the shopfront keep their blue paint, because that is the shop's colour; reshoot them for your own premises.

Accessibility and Fallbacks

Every page scores 100 for accessibility in Lighthouse. Headings are sentences; every photograph has written alt text.
All interactions work from the keyboard: the path previews on focus, the fan's arrow buttons, the photo pile's arrow keys, the slip and the phone menu (focus held inside while open, Escape closes, focus returns to the button that opened it).
With reduced motion, nothing animates in: the wordmark is set, reveals are shown, the bunch appears already tied, and the photo pile can still be moved by hand but does not drift.
Without JavaScript, or if the CDN is blocked, every page is a complete document. Controls that need the script are hidden, each page ends with a plain order section and an email link, and the forms submit by email.

Dependencies

GSAP 3.15.0 with ScrollTrigger on every page, and Draggable on the weddings page (works with 3.12+).
Lenis 1.3.17 for smooth scrolling (optional; add ?smooth=off to the URL or data-smooth="off" on <html> to switch it off).
Cross-document view transitions crossfade between pages in browsers that support them; others load pages normally.

Fonts

Fraunces (display; the wordmark uses a heavy soft-cut instance) and Karla (text) are self-hosted as latin WOFF2 files in assets/fonts/, under the SIL Open Font License (OFL-Fraunces.txt, OFL-Karla.txt). Only the wordmark face and Karla are preloaded.

Images and Credits

Photographs are bundled as graded, resized WebP derivatives in assets/img/. assets/img-manifest.json lists each output, its source and grade; re-bake with bun scripts/build-template-assets.ts florist-template --force from the GSAP Vault repository, or replace a file in assets/img/ with your own at the same name and size. The product photographs were shot on blue paper and cut out of it (the *-cut.webp masters in assets/img-src/), keeping a soft contact shadow, so they no longer depend on the page colour.

Generated images. These are AI-generated images (Codex image engine, October 2026) of a fictional shop, its owners and its flowers; the masters are in assets/img-src/: hero-jug, hero-order, hero-wedding, bunch-thursday, bunch-one-kind, bunch-fortnightly, bunch-jam-jar, bunch-low-table, bunch-in-hand, bunch-detail, pell-portrait, shopfront and the eight stem-* photographs. Every product and stem is used as a cut-out (*-cut.webp), keyed from the blue paper so the products stand on the page and the stems overlap cleanly in the fan. They depict no real shop, person or brand.

Stock photographs, from Pexels under the Pexels licence:

File	Source
`workshop-hero-*`	https://www.pexels.com/photo/38506768/
`workshop-thursday`	https://www.pexels.com/photo/35001331/
`workshop-beginners`	https://www.pexels.com/photo/5409681/
`workshop-wreath`	https://www.pexels.com/photo/10776542/
`workshop-wreath-hands`	https://www.pexels.com/photo/10776609/
`workshop-table`	https://www.pexels.com/photo/38506764/
`wedding-long-table`	https://www.pexels.com/photo/14703711/
`wedding-toast`	https://www.pexels.com/photo/37907761/
`wedding-couple`	https://www.pexels.com/photo/4311264/
`wedding-bouquet-blue`	https://www.pexels.com/photo/5837408/
`wedding-table-blue`	https://www.pexels.com/photo/4441792/
`wedding-delphiniums`	https://www.pexels.com/photo/8746996/
`wedding-arch`	https://www.pexels.com/photo/39908350/
`wedding-runner-*`	https://www.pexels.com/photo/35985203/
`shop-morning`	https://www.pexels.com/photo/5413716/
`shop-buckets-*`	https://www.pexels.com/photo/8180510/
`bunch-tying`	https://www.pexels.com/photo/5894067/

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.