Interactive — this is the real build running inside the page.Full screen
What it does
A custom Shopify theme design for a Gemmayzeh pottery studio, built from Online Store 2.0-style sections. A live theme editor recolours, re-types and reorders the store as you click, the gallery wall drifts in slow parallax, and collections filter by availability, price, type and glaze. Product pages, the cart drawer, a one-page checkout with cash on delivery and the customer account all work end to end.
Signature interaction
Choose a form, clay and glaze, drag the dip line on the piece, then fire the kiln: the doors close, the temperature climbs a cone 6 firing curve, the cones bend, and the door opens on a glossy fired piece with its own drips, ready to reserve from the next firing.
What works in it
Live theme editor: colour scheme, font pairing and button style
Drag to reorder or hide home page sections
Editable rotating announcement bar with a kiln countdown
Mega menu and predictive search with keyboard support
Gallery wall with slow parallax columns and spotlight hover
Collection filters for availability, price, type and glaze colour
Sort, grid density switch and quick add
Variant swatches, buttons and dropdowns that switch the gallery
Sticky add to cart, store pickup check and notify-me for sold-out sizes
Cart drawer and cart page with free-delivery meter, gift wrap, notes and SITESUP10
One-page checkout with cash on delivery, card and Whish, then order status
Customer account with orders, buy again, addresses and code sign-in
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.