Interactive — this is the real build running inside the page.Full screen
What it does
A custom Shopify theme for a Lebanese mouneh brand, built from Online Store 2.0-style sections. Scroll past a stone triple-arch window as spring, summer, autumn and winter go by and each season's jars fill on the sill; recipe cards check which jars are already in your cart and add the missing ones in one tap. Collection filters, variant swatches, a fill-it-yourself gift basket, a cart drawer with a free-delivery meter and SITESUP10, a Shopify-style checkout with cash on delivery, card and Whish, a customer account and a live theme editor all work end to end.
Signature interaction
Scroll past a Lebanese triple-arch window and the year turns outside it: blossom in spring, kishk drying on the roof in summer, the olive harvest in autumn, snow on Sannine in winter. Each season's jars fill on the sill, get their lids and handwritten Arabic labels, and any jar opens its product page.
What works in it
Scroll-driven four-season window that fills the jar shelf
Recipe cards that check your cart and add the missing jars
Cart drawer that shows what your basket can cook
Live theme editor with colour schemes, fonts, buttons and announcement text
Drag-to-reorder and hide home sections, saved per visitor
Collection filters for stock, price, type, jar colour and season, with sort and grid density
Predictive search across jars, recipes and shelves, in English or Arabic
Variant buttons, swatches and dropdowns with sold-out combinations and restock alerts
Fill-it-yourself gift basket with a handwritten tag preview
Pickup availability per shop and a delivery-date estimate
Free-delivery meter, gift wrap, packing notes and SITESUP10
Shopify-style checkout with cash on delivery, card and Whish, plus orders and reorder in the account
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.