E-commerce · Food & Beverage Store

Beit Roast

Specialty coffee, craft sodas and warm pastries, by scooter across Beirut

Interactive — this is the real demo running inside the page. Full screen
Beit Roast — screenshot of the live demo

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

Countdown Timer — live feature demo
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.

Try it
Product Bundles — live feature demo
E-commerce

Product Bundles

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.

Try it
Multi-step Checkout — live feature demo
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