Shopify Builds
Engineering write-ups from live Shopify storefronts — the constraint we worked inside, what we built, and what it cost.
Storefronts
Builds
Market-forked product JSON-LD authored in the product section, with a templated tier for the catalog
Two tiers of structured data at the foot of one Three Ships product section: complete, per-market `@graph` documents for the hero SKUs, branched on `request.host`, and a Liquid-templated Product and Offer block that reads variants, currency and barcode for the rest of the catalog.
Three Ships · high
Marketing image banner with mobile art, typography controls and highlight headings
A campaign banner built as a fork of Dawn's image banner: the vendor's class contract and overlay behaviour left intact, with a real mobile source, per-block type controls and an inline highlight convention layered on top.
LUS Brands · med
Mega-menu header with separate mobile menu and image blocks
A second link-list setting gives the mobile drawer its own information architecture, and section blocks put imagery into panels that Shopify's link lists have no way to carry it in.
Three Ships · high
Mega-menu product rail (v2): a library-free slider in a theme asset, constructed per panel when the panel is seen
The second generation of Nudestix's menu rail — a merchandiser title, a shop-all link and a track of navigation cards — keeps its slider in `megamenu-slider.js`, a small class that measures slide width at move time and is constructed per panel on first intersection.
Nudestix · med
Merchandisable homepage product carousel with a tag-driven badge engine and inline add-to-bag
A two-column row — optional linked lifestyle image, Swiper rail — where every label, color, badge and product is a theme-editor setting, and each card can add to bag without leaving the page.
LUS Brands · high
Metafield-driven PDP content system: auto-built accordions, need-to-know strip and campaign widgets
A layered content resolver on the Nudestix product page: legacy description HTML parsed into accordions at render time, three of them overridden per shade from metafields, with icon strips, badges and campaign widgets assembled from 29 metafield keys around them.
Nudestix · high
Metafield-driven breadcrumbs across product, collection, page, blog and article
One breadcrumb snippet whose ancestor trail is authored per product and per collection through a `custom.breadcrumbs` collection-list metafield, with a three-level fallback for products and natural trails for pages, blogs and articles — rendered as a real navigation landmark from a single argument-free `{% render %}`.
LUS Brands · med
Metafield-driven editorial article template (TSB blog)
A long-form article template assembled entirely from article metafields — deck, takeaways, science callouts, references, FAQ, author credentials, related reading and in-content commerce — in a single section with no theme-editor settings, so an editor never touches the theme to publish a fully structured post.
Three Ships · high
Metafield-driven product information tabs with mobile accordion and variant refresh
How To, Ingredients, FAQs and Tips render below the buy box from metafields — as tabs on desktop, as a native accordion on mobile, and re-resolved from the server every time a shopper picks a different variant.
LUS Brands · high
Metafield-driven two-level FAQ accordion grafted into a help-center app's shell
The help-center page kept the app's shell. The answers inside it moved into a Shopify page metafield, and a two-level accordion we wrote renders them — deep-linkable, keyboard-operable and reusable elsewhere in the theme.
LUS Brands · high