Interactive — this is the real build running inside the page.Full screen
What it does
A modular Shopify theme design for a Beirut stationery studio, built from Online Store 2.0-style sections. The notebook studio re-dyes the real product photo in six linens and presses your initials in foil or blind deboss before you buy, with inside-page and to-scale previews. A live theme editor changes colour scheme, fonts, buttons, announcement text and section order, and the collection filters, product pages, cart drawer, one-page checkout with cash on delivery and customer account all work end to end.
Signature interaction
Pick a linen and type your initials, then a brass die drops onto the real notebook photo and leaves them pressed in foil that catches the light as you move across the cover.
What works in it
Notebook studio that re-dyes the real photo in six linen covers
Brass-die press animation for initials in gold, silver, copper, white ink or blind deboss
Inside-page and to-scale size previews
Theme editor: colour scheme, font pairing, button style, announcement text
Drag to reorder or hide home page sections, saved per browser
Mega menu and predictive search with suggestions
Collection filters by availability, price, product type and colour, with sort and grid density
Product page with variant swatches, sold-out variants, pickup availability and sticky add to cart
Reviews you can filter, sort and post
Cart drawer with free-delivery meter, gift wrap, order note and SITESUP10
One-page preview checkout with cash on delivery, card and Whish
Customer account with code sign-in, orders, buy again and addresses
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.