Shopify Builds
Engineering write-ups from live Shopify storefronts — the constraint we worked inside, what we built, and what it cost.
Storefronts
Builds
Hero slide content renderer with per-breakpoint typography controls
One Liquid snippet renders a hero slide's pretitle, title, description and CTA from block settings, carrying the desktop and the mobile type spec on the same element as paired CSS custom properties, so two different slideshow sections share a single copy renderer.
Nudestix · med
Homepage exclusive-offers rail with caption heights equalized in idle time
A merchandiser-built row of promotional tiles for the Nudestix homepage — grid or swipe rail, chosen separately for desktop and mobile — whose uneven caption blocks are measured in idle time and equalized through a single `--content-height` custom property.
Nudestix · high
Homepage hero carousel v2 - video and split-image slides with per-slide typography control
The live homepage hero: two independent carousels over one authored slide list, video slides and split-image slides, typography controlled per slide, and promotion events fired from the slide's own copy.
Nudestix · high
House pagination component with result counter for blog and collection grids
A self-contained `de_pagination` snippet: pill page buttons, prev and next arrows that become non-focusable spans at the ends of the range, and a computed result-range line, rendered by the blog index and the collection grid from one file.
LUS Brands · low
Inline size picker on cart and PDP upsell cards
Size pills added inside the premium theme's own upsell card, so a multi-variant upsell in the cart drawer, on the cart page or in a product-page "pair with" module can be sized and added where it stands instead of sending the shopper somewhere else.
Three Ships · med
Kids FAQ page: single-level variant of the FAQ engine
A second FAQ page for the kids sub-brand that shares the help center's content model — the same page metafield, the same accordion contract — but drops the category layer, so a shorter list of questions reads as one flat, keyboard-operable accordion with its own tone and its own way out.
LUS Brands · med
Kids featured collection: a custom element that builds its Swiper on approach and wraps the theme's own product cards
A `<kids-featured-collection>` element leaves its slides as static markup until an IntersectionObserver fires, initializes Swiper then, and tears everything down when the section is removed — around Dawn's `card-product`, not a card of its own.
LUS Brands · med
Landing-page hero sections with a no-JS add-to-cart on page templates
A hero kit for standalone campaign pages: per-breakpoint artwork and text placement in repeatable blocks, and a CTA that can be a real Liquid product form on a template where Shopify hands the theme no product at all.
Three Ships · med
Layout shell rewritten as a load-order contract: origin hints, two stylesheet tiers and an interaction-gated session recorder
Dawn 6.0.2's `theme.liquid` reworked so that the order things load in is written down: connection hints before the title, stylesheets sorted into a blocking tier and a deferred tier, fonts preloaded, and a session-recording script that waits for the shopper to move.
Nudestix · high
Main collection grid: merchandisable promo tiles, load-more and a filter blocklist
Dawn's collection grid extended in four directions: promo tiles a merchandiser places by grid position, a textarea that suppresses unwanted filter values, load-more over the Section Rendering API, and an infinite-scroll fallback.
Nudestix · high