Visual Product Engineering meets Edible Artistry

Jenna Rae Cakes

Shopify Liquid

React.js

Canvas API

Custom Metafield Mapping

Jenna Rae Cakes (JRC)is a premier bakery known for its aesthetic precision. While they offered custom image printing for cakes, the customer journey was "blind."

Users would upload a file and hope for the best, leading to significant back-and-forth communication, production errors, and a high volume of customer service inquiries.

JRC needed a technical solution that moved the "design responsibility" into the hands of the customer through an intuitive, real-time visual interface.

Case study: engineering solution and technical implementation

The Engineering (The Solution)

We engineered a custom Interactive Product Configurator that lives directly on the Shopify product page, replacing the standard "Add to Cart" flow with a guided design experience.

Dynamic Canvas Interface:
We built a custom React-based editor that allows users to upload, scale, rotate, and crop images within specific "safe zones" (circles, hearts, squares) tailored to the cake's dimensions.
Real-Time Rendering:
Using the Canvas API, we provided a high-fidelity preview that updates instantly, ensuring what the customer sees is exactly what the printer produces.
Persistent Design Architecture:
We developed a system where the customer's unique design coordinates and image assets are bundled into the Shopify checkout as unique properties. This includes a persistent "Review Design" link in the cart to eliminate "buyer's remorse."
Production-Ready Backend Sync:
We mapped the customizer output directly to JRC’s backend, providing their production team with perfectly scaled, print-ready files and layout specs, eliminating manual prep time.