01
Filters with purpose
The sample catalogue can be filtered by occasion, colour, flower type, arrangement and price, demonstrating how a real florist can shorten the path to the right gift.
About
Grown for a
reason.
PETAL is a fictional storefront concept built around how people actually choose flowers: by occasion, colour and flower type. Its content and imagery are illustrative, ready to be replaced with a florist's real inventory, sourcing story and delivery area.
02
Content ready for real stock
Every product includes structured attributes, care notes and reserved image geometry. Replace the illustrative copy and imagery with current inventory without rebuilding the interface.
03
Honest by default
Cart totals use real client-side math, while checkout and confirmation clearly remain local demos. No card is charged, no order is transmitted and no delivery is promised.
Behind the counter
Cut, arranged, wrapped.
A note on this demo
This storefront runs entirely in your browser: no backend, no API calls. Adding to cart and placing an order update local state directly, persisted to this browser's localStorage — instant, and honestly labelled as a demo. Nothing is ever charged and no order is transmitted anywhere.
Every photograph is self-hosted licensed stock used as illustrative art direction. It does not represent an item for sale or what a customer would receive; production teams should replace it with current product photography before launch.
The filter engine
Every field below is declared once, in one data file, and the shop keeps working:
occasion
Occasion
Birthday · Anniversary · Sympathy · Congratulations · Just Because
colour
Colour
Pink · Red · White · Yellow · Mixed
flowerType
Flower Type
Roses · Peonies · Tulips · Lilies · Seasonal
arrangement
Arrangement
Bouquet · Vase Arrangement · Potted Plant · Wreath
priceBand
Price
Under $40 · $40–70 · $70–120 · $120+