Interactive — this is the real demo running inside the page.Full screen
What this template does
A playful storefront for a Mar Mikhael roastery. Switching flavours recolours the whole hero, tapping a can cracks it open and floods the page into its product view, and every add-to-bag button rides off on a delivery scooter. Shop, pastry box builder, coffee subscriptions, zone-based delivery checkout and live order tracking all work.
Signature interaction
Tap a soda can and it shakes, fizzes and cracks open, flooding the screen with its flavour colour as the product page appears; every add-to-bag button then turns into a scooter that rides off to your bag.
Working in the demo
Flavour switcher that recolours the hero
Can crack-open with colour flood transition
Add-to-bag scooter animation
Coffee roast and grind selectors
Soda packs of 4, 12 or 24 with per-can price
Pastry box builder with fill-a-slot visuals
Subscription builder with delivery calendar
Delivery zone map with fee and ETA by neighbourhood
Time-slot picker with full and closed windows
Coupon codes (SITESUP10) and undo on remove
Four-step checkout with cash on delivery
Live order tracking with moving courier
Motion preview
Screen recording of the live demo. Concept template — sample data.
Features inside this template
E-commerce
Countdown Timer
A flash-sale bar and product card with a flip-digit countdown to a real deadline, a stock-left bar that ticks down as people buy, an 'ends soon' pulse in the last 10 minutes, and an automatic switch to 'Sale ended' with a notify-me form.
Two bundle mechanics in one demo: tier cards for a single product (Single, Duo −15%, Trio −25%) with per-bottle flavour picks, and a build-your-own box where every item moves a progress bar toward the next discount tier, with a live price breakdown and an animated savings counter.
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.