Shopify Builds
Engineering write-ups from live Shopify storefronts — the constraint we worked inside, what we built, and what it cost.
Storefronts
Builds
"Save With Sets": shade-selectable kit contents on the component product's page
A metafield-linked list of kits renders as an accordion on the product pages of the products inside them, and each kit opens a modal where every component gets its own shade picker before a single add-to-bag.
Nudestix · high
"Start with the basics" — a merchandiser-authored 3-step routine section with measured read-more clamping
A homepage routine band whose three step cards are theme-editor blocks tied to real products, whose heading takes a `[[...]]` highlight token, and whose "Read more" button is unhidden only after the browser has measured that the copy overflows its four-line clamp.
LUS Brands · med
'Bundle and save' PDP block driven by a product-list metafield
One product-list metafield, one card per product, and on every card a working add-to-cart form of its own — a merchandiser-curated set sold on the product page where the shopper already is, with a carousel that only appears when there is more than one thing to scroll.
LUS Brands · med
A collection template turned into a palette builder that carts one priced SKU
A pick-your-own palette promotion runs on a normal collection page wrapped in a `<bundle-element>` custom element, which holds a fixed tray of empty slots and posts one priced bundle product with the shopper's picks attached as line-item properties.
Nudestix · high
A second product template whose add-to-bag switches between one cart line and several
`main-product-bundle.liquid` is a fork of the theme's product section in which one Liquid conditional wraps the buy form in either a standard `<product-form>` or a `<bundle-product-form>`, depending on which bundle metafield the product carries.
Nudestix · high
A-Z ingredient glossary with scroll-spy letter navigation and product cross-sell
An ingredient encyclopedia authored as theme-editor blocks across 14 section instances on one page template, joined to a sticky letter bar by a single shared attribute, with every entry an accordion that links out to the products it appears in — education page as cross-sell surface.
Three Ships · med
Accessible link-label helpers for repeated CTAs
Two Liquid snippets that resolve a real conflict between two link-naming rules — identical link text on different destinations versus an accessible name that must contain the visible label — by deriving a name from the link's href and emitting it only when it differs from what the shopper can see.
Nudestix · low
Accessible play/pause web component for autoplaying hero video
A `<play-pause>` custom element that gives a muted, autoplaying hero video a real keyboard-reachable control — self-wiring from a selector in its own markup, so Swiper can clone and reorder slides without any script knowing how many there are.
Nudestix · low
Adults/Kids audience-switching header with automatic menu swap
One Liquid predicate decides which audience a page belongs to. The header reads it, replaces the entire navigation with the kids menu, and keeps a two-button switch back to the adult side in reach on desktop and mobile alike.
LUS Brands · high
Alt-text convention that maps product media to variants without metafields
Two Liquid snippets turn the alt text merchandisers already type in the Shopify media library into a variant match key and a four-tier match verdict, so a product gallery can filter media per variant at render time.
LUS Brands · high