Interactive — this is the real build running inside the page.Full screen
What it does
A dark-luxury Shopify theme design for a Beirut barbershop brand, built from Online Store 2.0-style sections. Pick your beard, skin and the minutes you have, and a vintage face chart lays out a timed ritual you can run, tweak and add to the bag as a discounted set. A live theme editor recolours, re-types and reorders the store, while collection filters, variants, barbershop pickup, the cart and a one-page preview checkout with cash on delivery, card and Whish all work end to end.
Signature interaction
Choose your beard, skin and the minutes you have, and a vintage barber's face chart draws your beard and lays out a timed ritual: each step lights up its zones on the chart, the set price drops as the ritual grows, and Run the ritual walks you through it with a live countdown.
What works in it
Ritual builder with a live barber's face chart
Timed ritual player that lights each step's zones
Ritual set pricing: 10% off 3 products, 15% off 5
Theme editor for colour scheme, fonts, buttons and announcement
Drag to reorder or hide home page sections
Predictive search with products, collections and suggestions
Filters for availability, price, type and colour swatches, with sort and grid density
Variant swatches that recolour the razor, with notify-me for sold-out options
Barbershop pickup availability and a live delivery estimate
Cart drawer with free-delivery meter, gift wrap, notes and SITESUP10
One-page preview checkout with cash on delivery, card and Whish
Customer account with email-code sign-in and order history
Motion preview
Screen recording of the live build, running on sample data.
Features inside this build
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.
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.