Shopify Builds
Engineering write-ups from live Shopify storefronts — the constraint we worked inside, what we built, and what it cost.
Storefronts
Builds
Shoppable-video to cart bridge: Hue add-to-cart event wired into Rebuy's drawer
A document-level listener that turns a shoppable-video app's add-to-cart intent into a real `cart/add.js` call with the cart sections rendered in the same response, then dispatches the theme's own cart events so the drawer, the count badge and every other subscriber update at once.
Three Ships · med
Side-by-side product comparison drawer and modal table
A compare-products flow with no app behind it: card checkboxes write the selection to localStorage, a drawer pinned to the bottom of the viewport carries it from collection to product page and back, and the modal table fetches each product's long-form copy from that product's own page section at the moment the shopper asks to compare.
Nudestix · high
Size-pill variant picker and quick add-to-cart inside product grids
One click handler, registered once on `document` in the capture phase, turns any grid card with a size-pill row into a variant selector and an add to cart — including cards that did not exist when the page loaded.
Three Ships · med
Skin quiz entry-point sections: separate desktop and mobile artwork in one section
A campaign panel that opens the Three Ships skin quiz, built so the desktop and mobile crops are two independently chosen images and the copy above them is four editable blocks.
Three Ships · low
Subscription bundle grid with tiered unlock progress
Two custom elements on the subscription landing page: a card whose two-step button reveals a frequency choice and then posts the variant with that `selling_plan` to the cart, and a wrapper that fetches the live cart after every add and drives a merchandiser-defined tier bar from what it finds there.
Three Ships · med
Swell VIP tier and email-subscriber segmentation resolved in Liquid
Two Liquid variables in `theme.liquid`: `loyalty_status`, resolved from the tags the loyalty vendor writes onto the customer record, and `subscriber_status`, resolved from email-marketing consent — both assigned before `content_for_header` and emitted only for signed-in customers.
Three Ships · low
Tabbed collection product slider and the shared merchandising card
One section renders every configured collection at once and switches between them with a class, so moving from Serums to Cleansers waits on nothing — and one card snippet backs the shelf, the blog and the rewards page.
Three Ships · med
Tabbed mobile Shop menu with featured banner panel
A custom `<shop-tabs>` element turns the drawer's first-level Shop menu into horizontal tabs with panels of category links, merges a theme-editor banner block into the tab order by position, and leaves every other drawer item on the vendor's accordion.
Three Ships · high
Tabbed multi-type search results page with faceted filtering
One query, three kinds of answer: a search section that counts products, articles and pages before it renders any of them, tabs between them, and keeps a set of SKUs out of the grid entirely.
Three Ships · high
Theme-wide section reveal that replaces Dawn's per-element scroll animations
One entrance animation for every top-level section on the storefront, applied from the layout rather than authored into each section — with the hide decided before first paint, the reveal driven by an intersection observer, and reduced-motion and no-JavaScript visitors never hidden from anything.
LUS Brands · med