Interactive — this is the real build running inside the page.Full screen
What it does
A Prestige-style editorial Shopify theme design for a Byblos candle atelier, built from Online Store 2.0 sections. Drag a match across the striker to light a candle and warm the room, then size it to your room with the calculator. A live theme editor changes colour scheme, fonts, buttons, cards, announcement text and section order. Collection filters, product pages with a burn-time calculator, cart drawer and a one-page preview checkout with cash on delivery, card and Whish all work end to end.
Signature interaction
Drag a match along the striker until it catches, and it flies to the wick: the room lifts from dusk into candlelight tinted by the scent you chose, while its notes rise above the flame.
What works in it
Strike-a-match lighting scene with three vessels and four scents
Room-size calculator with scent-reach floor plan
Live theme editor: colour scheme, fonts, buttons, cards, announcement bar
Drag-to-reorder and hide home page sections
Collection filters for availability, price, type, colour and scent, with sort and grid density
Product page with variant buttons, swatches and dropdown, burn-time calculator and sticky add to bag
Pickup availability across three stores and a delivery estimate timeline
Predictive search with suggestions and a results page
Cart drawer with free-delivery meter, gift wrap, order note and SITESUP10
One-page preview checkout with cash on delivery, card and Whish Money
Customer account with orders, order details, buy again and address editing
Reviews you can write, recently viewed and quick add
Motion preview
Screen recording of the live build, running on sample data.
Features inside this build
E-commerce
Product Configurator
A step-by-step builder for a made-to-order desk from a Beirut workshop: size, top, base, colour and extras, with a 3D preview that redraws on every choice and turns under your finger. Price, lead time, ready date and SKU update live, build rules explain what can't be combined, and every design gets a shareable code.
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.
A product grid where Quick view zooms the card image straight into a modal (shared-element transition) with a gallery, colour and size selection, quantity and add to bag. It is fully keyboard driven: Enter opens, arrows browse images, Tab is trapped inside and Esc returns focus to the card.
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.