Shopify Builds
Engineering write-ups from live Shopify storefronts — the constraint we worked inside, what we built, and what it cost.
Storefronts
Builds
Product-page FAQ accordion: page-backed answers, mobile 'View More' reveal, auto-emitted FAQPage
A local extension of Palo Alto's Tabs section that hides every FAQ row past the third on mobile behind one reveal button, and emits `FAQPage` JSON-LD from the vendor's own block loop, reading each answer from the same Shopify page or rich-text field the accordion displays.
Three Ships · med
Quiz results: a 34-rule, priority-ordered recommendation engine running client-side from metaobject data
The half of the Curl Quiz that turns answers into products. Liquid renders every possible recommendation once into hidden templates; a matcher in the browser runs 34 priority-ordered rules and clones the survivors into three result groups.
LUS Brands · high
Rebuilt 2026 PDP section with merchandiser-composable blocks and per-product ATC color
A custom product section for LUS Brands that declares 26 block types beyond Dawn's set, resolves title and subtitle copy per variant, and paints the add-to-cart button from a product metafield.
LUS Brands · high
Responsive video hero with independent desktop/mobile sources and single-source-of-truth playback controls
A `<video-hero>` custom element that holds a 16:9 cut and a 9:16 cut, promotes only the active breakpoint's sources to `src`, and wires one play/pause and one mute button to whichever video is live — with server-rendered control state so the buttons read correctly before the script runs.
LUS Brands · med
Rich-text section rebuilt as a per-block typography and highlight system
Dawn's `rich-text.liquid`, kept under its own name and rebuilt inside: every heading, text and button block writes its own type, spacing and colour tokens as CSS custom properties, and the `[[word]]` highlight and the button become snippets other sections share.
LUS Brands · med
Rotating announcement carousel above the header, with pause control
An auto-rotating promo bar rendered by the layout above the header: a looped Swiper of up to ten text blocks that reserves its height before any script runs, waits for the carousel library on a bounded retry, and gives the shopper a real pause control whose label always says what it will do next.
Nudestix · med
Server-rendered page-context dataLayer, declared in the head and pushed at browser idle
`theme.liquid` declares `window.dataLayer` ahead of the platform's head content, then pushes a context object assembled in Liquid — locale, shop country, page type and, for signed-in customers, subscriber, loyalty and login state — when the browser is idle, so every tag in the container reads the same server-side facts.
Three Ships · med
Shade swatch rendering and per-variant content payload
The swatches are the visible half. The other half is a hidden input per variant carrying that shade's copy, ingredients, SEO fields and badges — a data contract three separate features read without asking the server anything.
Nudestix · high
Shade-level collection grid hydrated from an external faceting service
A Shopify collection template that lists shades instead of products: the section renders an empty grid shell, then builds every card, facet and count in the browser from a bespoke faceting service outside the theme.
Nudestix · high
Shop-by-category carousel with collection-aware card fallbacks
A homepage category rail where adding a category is one action — pick the collection. The image, the link and the label all resolve from the collection record unless a merchandiser deliberately overrides them.
LUS Brands · med