01 / Brief
Commerce,
without friction.
IM8 brings a complex health-and-wellness proposition into a direct-to-consumer storefront. The work spans the everyday commerce experience: landing pages, product journeys and the cart—not simply a launch-day homepage.
Why it matters
This is sustained product work on a live business. The challenge is keeping the experience coherent as new campaigns, products and requirements arrive, while making the next shopping decision easier to understand.
My scope
Ongoing Shopify development across campaign landing pages, product journeys, cart interactions and storefront motion. This is commerce engineering within a collaborative brand team—not a claim to have created every asset or every third-party integration.
02 / Decisions
The choices behind
the experience.
- 01
Design the journey, not an isolated page.
Campaign storytelling, product explanation and cart behaviour are connected surfaces. Changes need to make sense across that whole path, rather than winning one screenshot.
- 02
Give mobile the real composition.
Content hierarchy, spacing and interaction targets need to survive a small screen. The desktop layout is not a substitute for checking the actual mobile purchase path.
- 03
Make motion earn its place.
Browser-native transitions and lightweight GPU animation support continuity without turning shopping into a mandatory animation sequence.
03 / Craft
Inside the commerce system
The interesting work is often between the visible screens. A cart upgrade, a subscription choice and a transition all have to preserve the shopper’s intent.
- 01
Read the current cart
Resolve live line keys rather than assuming an earlier rendered state is still current.
- 02
Replace, don’t duplicate
Keep the selected selling plan and quantity; avoid adding the same stack twice.
- 03
Reconcile the result
Render the returned sections, reconcile gifts and report an uncertain outcome honestly.
A cart upgrade is a state transition.
The stack-upgrade implementation reads the current cart before deciding what to replace. It checks whether the destination bundle already exists, preserves the selling plan, and uses the returned cart state to update the drawer. That is more involved than putting an “add” button inside a carousel.
Failure paths are part of the interface.
The upgrade does not fall back to a cart permalink that could add a bundle without removing the products it replaces. It surfaces the failure, unlocks the controls and gives the shopper a coherent retry path instead of silently creating a different order.
Motion is progressive enhancement.
The View Transitions helper checks browser support and the motion preference before using the API. Its current implementation opts into desktop transitions; unsupported paths perform the underlying update directly. The purchase flow does not depend on the transition being available.
The work has to survive another campaign.
Reusable theme sections, product states and cart components matter because the storefront keeps changing. My role is to carry the experience through those changes: visual hierarchy, responsive behaviour and the less-visible details that keep the journey working.
The toolkit
- Shopify & Liquid
- Theme-level implementation, reusable sections and product-focused interfaces within a live commerce system.
- Browser-native motion
- View Transitions and GPU-friendly animation as progressive enhancement, with usable content underneath.
- Rendered verification
- Check real page states, responsive layouts and the handoff between product information and cart behaviour.
04 / Evidence
See the actual work.
A capture of the live IM8 experience, not a fictional storefront. The public site continues to evolve; this is a selected view of an ongoing role.
The demonstrated output is a working commerce experience and the implementation behind its purchase paths. No conversion-lift figure is attributed to these changes here.