Shopify Builds
Engineering write-ups from live Shopify storefronts — the constraint we worked inside, what we built, and what it cost.
Storefronts
Builds
Mobile sticky add-to-cart bar mirrored from the real product form
A bottom bar portaled to `<body>` that mirrors quantity, button label, disabled and loading state from the product page's own form, forwards taps into it, and follows iOS Safari's visual viewport as the browser chrome collapses.
LUS Brands · high
On-model shade carousel bound two ways to the Dawn variant picker
A Flickity carousel of one on-model shot per shade, rendered below the product gallery from a variant metafield; each cell carries the id of its Dawn variant radio, a tap on a face resolves to a click on that radio, a click on a radio moves the carousel — and the carousel itself never touches the product form.
Nudestix · high
PDP content accordion that borrows the premium theme's collapsible contract
A product-page accordion block that reuses Palo Alto's own `data-collapsible-*` behavior wiring while supplying its own heading semantics, CSS-variable theming and a responsive table layout for the long-form panels merchandisers author per product.
Three Ships · med
Per-collection hero banner driven entirely by collection metafields
One section instance in the collection template serves every collection: its heading, copy and two separately cropped artworks are bound to collection metafields through dynamic sources, and it renders two independent breakpoint layouts from them, so launching a collection is a merchandising task rather than a theme edit.
LUS Brands · med
Pill variant picker with merchandiser-named size labels
Dawn prints an option value and nothing else. We extended its picker so a size pill carries two lines — a merchandiser's word for that size above the size itself — and falls back to positional defaults when nobody has written one.
LUS Brands · med
Predictive search moved off Shopify onto an external search API with client-side templating
The type-ahead rebuilt from the inside: same custom element, same keyboard model, same ARIA contract — a different data source and a render step that did not exist before.
Nudestix · high
Press / trust logo strip with scroll-snap carousel and no JavaScript
A blocks-based logo row for the homepage that a merchandiser can reorder, relabel and link — and that becomes a swipeable, snapping carousel on mobile through CSS alone, with no slider library and no script of its own.
LUS Brands · low
Price snippet with a bundle 'value' metafield line and opt-out labelled price links
Dawn's price snippet on Nudestix, extended in two small ways: a product metafield adds a "worth" line beside a kit's price, and the price text becomes a labelled link to the product unless the caller says otherwise.
Nudestix · low
Product card with award badges, per-variant content payload and per-card structured data
One snippet renders the whole Nudestix grid card: tag and award badges, quick view, wishlist, comparison, an in-grid add to bag, and a per-variant data payload the shade switcher reads without a fetch.
Nudestix · high
Product-card hover video and a reusable deferred-media playback refactor
The shared product card's hover slot can hold a short clip instead of a second still: a per-product metafield decides which, the card emits a video that fetches nothing until asked, and a pointer-only, motion-aware binder plays it on hover of the whole card — plus a refactor of Dawn's deferred-media element that handles every player kind through one function.
LUS Brands · med