E-commerce · Perfume & Oud Store

ATTAR HOUSE

Dark-luxury oud house with a scent finder that pours your notes pyramid.

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

What it does

A Beirut perfume and oud house in oud brown, burgundy and gold. Five questions pour an animated notes pyramid tier by tier and land on three matches; a layering lab blends two scents into named accord bars, a discovery box takes five vials, and every cap can be engraved with a live preview. Shop, product pages, bag and a four-step preview checkout with cash on delivery all work end to end.

Signature interaction

Answer five questions and liquid gold pours into a notes pyramid tier by tier, base to heart to top, then three matches drop out of it with their match percentage.

What works in it

  • Five-question scent finder with a liquid notes pyramid
  • Three matches with match percentage
  • Product wheel you can drag or step through
  • Layering lab with blended accord bars and a generated name
  • Discovery box: choose five vials that fly into the tray
  • Live cap engraving preview with lettering and finish
  • Concentration selector: EDP 50 or 100 ml, oil 12 ml
  • Sold-out size with notify-me form
  • Shop filters by family, intensity and price, with sort and search
  • Bag with two free samples, gift wrap and SITESUP10
  • Four-step checkout with cash on delivery, Whish Money and OMT
  • Boutique testing-chair booking on a coast map

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
Product Bundles — the feature running live
E-commerce

Product Bundles

Two bundle mechanics in one feature: 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
Upsell & Cross-sell — the feature running live
E-commerce

Upsell & Cross-sell

A phone product page with a frequently-bought-together checklist and combined price, a post-add modal offering protection at a one-time price with a live countdown, and a cart drawer that suggests what completes the setup, offers a storage upgrade on the line item and unlocks a free gift above a spend threshold.

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