A jug, sleeve and straw builder for HydroJug

HydroJug sells half-gallon water jugs that shoppers dress with a sleeve and a straw. Its HydroViewer let them build that set on the product page and see it before buying. HydroJug was moving its Shopify store to a new theme, and the HydroViewer had to come with it.

The old builder had limits. It couldn't handle products both with and without variants, it couldn't take more than one jug, and the new theme's cart popup could only show one item at a time, while the builder adds several at once.

DYODE started with design. Wireframes and mockups for the builder, the bundle page and the mini cart were signed off in Figma before any code was written.

The build was mobile-first and tested across devices and browsers. Scope added along the way, such as the Inspiration tab and the cart popup, went through change orders approved before work began.

A step-by-step builder: pick a jug, then a sleeve, then a straw, or no straw, and the preview stacks the real product photos as you go. It handles products with and without variants and orders with more than one jug.

A bundle version of the builder on its own page template, an Inspiration tab, and a rebuilt cart popup that shows every item the builder adds.

Partway through the build, HydroJug renamed its product types, and the builder's logic keyed off those types. DYODE reworked the logic to match the new list instead of patching around it.

DYODE delivered the builder on a preview theme with written feature documentation. HydroJug's team duplicated that theme and launched from it.

The new HydroViewer launched with HydroJug's new theme. Shoppers could build a jug, sleeve and straw set on desktop or phone, add more than one jug, and see everything they picked land in the cart.

HydroJug's team got a builder documented well enough to run on their own after handoff.