From Blind Uploads to a Print-Accurate Design Studio

Jenna Rae Cakes

Shopify Liquid

React Customizer

Fabric.js / Canvas

Metafield Mapping

Image Upload API

The Challenge

Jenna Rae Cakes (JRC) is a premier bakery known for aesthetic precision. They already offered custom image printing, but the customer journey was blind.

Users would upload a file and hope for the best, driving back-and-forth with CX, production errors, and a high volume of design disputes.

Blind uploads, guesswork results

Without a live preview inside the product’s print zone, customers couldn’t tell if faces would crop or text would clip. Every order became a negotiation with support.

Production absorbing the risk

The bakery team spent hours manually resizing and verifying layouts so printer output matched intent. Ambiguous uploads taxed a high-margin custom SKU.

Must live on the Shopify PDP

Design responsibility had to move into the customer’s hands through a real-time visual interface, not another third-party app that broke checkout or print fidelity.

A basic file-upload app wasn’t going to cut it. JRC needed a print-accurate studio on the storefront, then a partner to keep evolving it as new shapes and product lines came online.

The Engineering (The Solution)

We built a custom Interactive Product Configurator on the Shopify product page. It replaced a blind upload with a guided design experience, and we kept owning it through mobile print quality, new shapes, and a 2D topper customizer.

Dynamic Canvas with Shape-Safe Zones

We built a React + Fabric.js editor where customers upload, scale, rotate, and position images inside product-specific clip paths: circles, squares, hearts, and rectangles sized to the cake. The outline isn’t decorative; it’s the safe zone the printer respects.

Real-Time Rendering That Matches Print

Using the Canvas API, the preview updates instantly so what the customer sees is what production prints. On mobile we upscale the canvas before finalize so small screens don’t silently ship low-resolution print files.

Persistent Design Architecture in Checkout

Finalized designs are written into Shopify line-item properties as a composed Custom Design asset, with a Review Design path in cart to cut buyer’s remorse. HMAC-authenticated uploads keep the asset pipeline store-scoped and production-ready.

Product-Line Expansion & Hardening

After launch we expanded shapes, hardened upload interactions, and shipped a dedicated 2D Topper customizer so a second high-margin line inherited the same guided studio. A reusable customizer platform, not a one-off widget.