Shopify Builds
Engineering write-ups from live Shopify storefronts — the constraint we worked inside, what we built, and what it cost.
Storefronts
Builds
Color-accurate shade swatches driven by a merchandiser-editable hex registry
Roughly 250 `Shade Name:#hex` pairs live in one theme setting. The product section resolves every option value against them in Liquid, groups the results by finish, and paints each swatch server-side.
Nudestix · high
Configurable PDP block system on the Palo Alto theme (Recharge widget placement, size charts, siblings, quick view)
Merchandiser-orderable buy-box blocks on Three Ships' licensed theme, with the subscription app block captured and re-emitted inside the buy box, plus metafield-driven size charts, a product-family switcher and a sticky add-to-cart bar.
Three Ships · high
Country/market selector hardened for three simultaneous instances
Dawn's country selector, rendered three times on every page, with every option id namespaced by the position that rendered it and three ARIA attributes removed — so the three instances stop colliding and the vendor's own localization script needed no change at all.
LUS Brands · low
Creator collab video listing driven by article metafields
A blog turned into a creator video index: each article is a creator record whose video address, platform and handle live in article metafields, rendered as a paginated grid of inline-playing cards that request no third-party iframe until someone presses play.
Nudestix · med
Curl Quiz 3.0: a nine-step diagnostic quiz rendered entirely from Shopify metaobjects
A nine-step hair diagnostic on the LUS Brands storefront whose questions, options and selection rules live in Shopify metaobjects rather than in the section's code. The theme editor exposes exactly one setting.
LUS Brands · high
DE Hero: art-directed image/video hero with layout controls
A campaign hero that serves a genuinely different mobile crop through hand-built `<picture>` markup, publishes both breakpoints' aspect ratios as CSS custom properties, switches to a hosted video from one setting, can make the whole frame a link, and decides its own loading priority from where it sits on the page.
LUS Brands · med
DOM and shadow-DOM remediation layer for Yotpo, Rebuy and Recharge widgets
Corrections applied to markup the theme didn't write: `MutationObserver` routines that re-level a review widget's headings, demote headings inside a cart drawer, re-anchor a subscription add-to-cart control, and append a stylesheet inside a subscription widget's shadow root — every one re-entrant, so the fix converges instead of looping.
Three Ships · med
Dawn media gallery hardened for hidden slides and deferred video
A surgical patch to Dawn's `media-gallery` custom element so that selecting, reordering and announcing media all skip slides the server has hidden for the current variant — and so a variant with no matching thumbnail degrades to a sensible slide instead of an exception.
LUS Brands · med
Deferred LyveCom shoppable-video mounting on the product page
An integration layer that loads LyveCom's widget script once per page and mounts each carousel only when its container is about to enter the viewport — so a paid shoppable-video app stays off the product page's first paint, and a theme-editor reload doesn't mount it twice.
LUS Brands · med
Detached mobile drawer with three-level native-details navigation
The mobile menu panel lives outside the element that opens it. The theme's own drawer class was taught that shape, and the panel it opens is a native `<details>` accordion three levels deep that expands without JavaScript.
LUS Brands · med