Shopify Builds
Engineering write-ups from live Shopify storefronts — the constraint we worked inside, what we built, and what it cost.
Storefronts
Builds
Editorial split banner with typographic control and merchandiser-authored offer details
A homepage banner where layout mode, desktop and mobile artwork, subtext type scale, five colours and an offer-details panel are all settings, so a campaign and its terms publish together without a developer in the loop.
Nudestix · med
Eight WebMCP tools that make a product page answerable — and buyable — by a browser agent
A feature-detected block in the theme layout registers eight `navigator.modelContext` tools on one trial-kit product page — seven an agent can read from, one that adds a Liquid-fixed variant to the cart.
Three Ships · high
Featured tutorial with an adjacent shoppable product rail
One section, two halves: a poster-first video that fetches its YouTube or Vimeo player only on click, and beside it the first three products of whichever collection a merchandiser picks — each one a real card with a quick view and an add to bag that never leaves the page.
Nudestix · med
Featured-collection product card with metafield hero/hover media and a tag-driven badge stack
The card that renders inside the homepage's main merchandising rail: hero and hover art chosen in the Shopify admin, a responsive image ladder built by hand, and a badge stack resolved from tags, price and block settings at render time.
LUS Brands · high
Filter-triggered promo cards inside the search results grid
A theme-editor block that puts a merchandiser-designed card into the search results grid at a chosen position, and shows it only while a named facet is active on that query.
Three Ships · med
Font delivery and a template-conditioned image preload in a licensed theme's layout
Three Ships' `theme.liquid` decides its own font delivery on a licensed theme — the picked faces preloaded, an Adobe Fonts `@font-face` block inlined with its loader demoted behind it — and emits one image preload on exactly one template type, under an explicit condition.
Three Ships · med
Four selectable How-To step layouts from a single metaobject step list
One list of `how_to_use` step metaobjects renders as a card grid, a slider, a numbered timeline or an image-and-text split, chosen per product, with a desktop and a mobile asset per step and video that plays only while in view.
LUS Brands · high
GA4 ecommerce dataLayer instrumentation across a Rebuy cart
A client-side event layer that hangs off the network rather than off the DOM: a `fetch` wrapper that recognizes a cart add, a diff against the previous cart so the event reports what changed, and item taxonomy read from a block the product page already renders.
Three Ships · high
Grouped shade swatch picker with shade-finder dialog and GA4 shade-finder events
Finish became a variant metafield instead of a second product option, which is what lets forty shades group into Matte, Matte Lux and Bloom without touching the SKU matrix — and the shade quiz beside them is bought, wrapped in a native dialog and measured on our side of the boundary.
Nudestix · high
Hand-authored per-market JSON-LD for the Bundles & Kits collection
One Liquid snippet in the layout's head carries a complete schema.org graph for the Bundles & Kits collection — breadcrumb, collection page, a product list with offers, and the page's FAQ — written twice, once for the Canadian storefront and once for the US one.
Three Ships · med