HeyChuck

Overview

HeyChuck sells the 'Upchuck First Aid Kit', a car-sickness kit for parents, and the brand needed a storefront as playful as the product, on a tight timeline and simple enough for the owner to run herself afterward. Over a roughly six-week engagement I hand-coded the entire frontend as one long scroll: 11 custom Liquid sections with scoped CSS and vanilla JavaScript, where every 'Get Your Kit' button anchors straight to the product card or pops the cart drawer. A brand token system with seven swappable color schemes keeps everything editable from the theme editor, three sections rewrite their own DOM under 750px to become swipeable carousels, and the travel-bingo game remembers your tapped squares in localStorage, a little detail families genuinely play with. I checked every section against the Figma design at desktop and mobile before it shipped. The store is live at [heychuck.co](https://www.heychuck.co) and the owner runs it entirely herself, thanks to a recorded admin walkthrough and a written cheat sheet at handoff.

Technical highlights

• 11 hand-coded Liquid sections with scoped CSS and zero build step.
• Brand design-token system with 7 swappable theme-editor color schemes.
• Runtime DOM-rewriting responsive carousels under 750px.
• Section-by-section visual QA against Figma at desktop and mobile.
• Termageddon and Usercentrics consent integration.

What shipped

• Single-page storefront with anchored purchase flow
• Interactive travel bingo game with localStorage persistence
• JS-injected mobile carousels
• 7 swappable brand color schemes
• Automatic free-shipping discount configuration
• GDPR consent + auto-generated legal policies
• Client handoff kit: admin walkthrough and cheat sheet

Stack

Shopify, Liquid, JavaScript, Performance Optimization, Playwright QA, Figma-to-Code

Screens