E-commerce · Florist: Flowers, Bouquets & Trees

ZAHRA

A Beirut florist where you build the bouquet stem by stem and get it the same day

Interactive — this is the real build running inside the page. Full screen
ZAHRA — screen from the live build

What it does

A romantic botanical store for a Gemmayzeh florist. Its signature bouquet builder flies every stem you tap into a hand-drawn paper cone, layered like a burger builder, with wrap paper, ribbon, a handwritten card and a live price. Same-day delivery is checked against the visitor's clock by Beirut area with a live cut-off countdown, and the shop, product pages, trees and plant finder, garden visit booking, basket and four-step checkout with cash on delivery, Whish and OMT all work end to end.

Signature interaction

Tap a peony, a rose or a sprig of eucalyptus and the stem flies into a hand-drawn paper cone and settles into the bouquet layer by layer; switch the wrap, ribbon and colour story, write the card in handwriting, and the size tag and price update as you go.

What works in it

  • Bouquet builder with stems that fly into a layered SVG bouquet
  • Wrap paper, ribbon and colour story that restyle the bouquet live
  • Card message previewed in handwriting
  • Same-day delivery checker by Beirut area with a live cut-off countdown
  • Delivery date and time-slot picker that respects the cut-off
  • Shop filters by occasion, budget, same-day and pet-safe, with sort and search
  • Product sizes, add-ons, size guide and close-up view
  • Plant care finder that ranks plants by light, watering and pets
  • Garden consultation booking with validation
  • Flower Letter subscriptions: weekly, every 2 weeks or monthly
  • Basket drawer with free-delivery progress, undo and SITESUP10 code
  • Four-step checkout with cash on delivery, Whish, OMT or card

Motion preview

Screen recording of the live build, running on sample data.

Features inside this build

Product Variant Selection — the feature running live
E-commerce

Product Variant Selection

A phone product page where colour swatches swap the gallery with a circular colour-wipe, storage options show price differences and low or sold-out stock per colour, an availability matrix shows every colour × storage combination at a glance, and the SKU, price and URL update with each choice.

Try it
Advanced Product Filters — the feature running live
E-commerce

Advanced Product Filters

A 24-product catalogue with faceted filters for category, price (dual slider over a price histogram), colour swatches, size, rating and in-stock. Active filters show as removable chips, counts update live, the grid re-sorts with smooth FLIP animation and the whole state lives in the URL so a filtered view can be shared.

Try it
Multi-step Checkout — the feature running live
E-commerce

Multi-step Checkout

A four-step 'Almost yours.' checkout: contact and Lebanese address with inline validation, delivery zones priced by city with speed options, a calendar and time windows, payment by cash on delivery (USD or LBP), card with live brand detection, Luhn check and a flipping card preview, or a simulated Whish link, then a review with edit links and an order confirmation.

Try it