Product customiser app

The problem

Made-to-order apparel needs a customiser that works every time and a workflow behind it. Theme code alone can't deliver either, and the customisers currently available can be unreliable once a store's products, theme or workflow get specific. Merchants end up with fragile customisers, and quotes, proofs and approvals scattered across email and spreadsheets.

The solution

• Layer-based products: a product is assembled from layers (body, panels, trims, straps and so on) that combine into one product shown in a live preview.
• Swappable parts: layers can be switched or hidden to suit a different design, so one product can cover many variations.
• Everything is styleable: colours, graphics, logos, lettering and details such as padding can all be changed, with the merchant deciding what shoppers may change and what stays locked.
• Built for apparel first, with a structure that also suits other made-to-order products.
• Guided, mobile-first steps with undo/redo, zoom and pinch, and placement spots the merchant defines.
• Staff template editor: drag, resize and rotate logo and text slots on the same renderer customers see.
• Quote queue in Shopify admin: statuses, follow-ups, assignees, pricing, notes timeline, CSV export and printable production sheets.
• Proof and approval: staff refine a design, send a private link, and the customer approves or requests changes.
• Automated follow-up reminders, plus funnel analytics showing where customers give up.

How I'm working through it

The problems I hit, the decisions I made and what each one taught me.

1. 01

   Define the idea: one product, built from layers

   The core idea is simple. A product is a stack of layers, such as the body, panels, trims and straps, that combine into one product. Each layer can be recoloured and restyled, swapped for a different part to suit another design, or hidden. Graphics, logos, lettering and details like padding can change too, and the merchant decides what shoppers may touch.

   That structure is aimed squarely at apparel, where one garment has many parts and many variations, but it carries over to other made-to-order products.

2. 02

   Define what "reliable" means

   Before writing code I wrote down what a merchant selling made-to-order products actually needs. The customiser has to work on any theme, on a phone, every time. The result has to be something the print or production team can trust. And the work after the shopper clicks "submit" (quoting, revising, getting approval, following up) has to live in one place.

   I also studied the existing options. The gap I found was not another preview widget but the reliable customiser plus workflow combination.

3. 03

   Decide the scope and the constraints

   Two early decisions shaped everything. Shoppers choose from placement presets and auto-fit rather than free drag-and-resize, which is simpler for them and prints better. And the customer-facing part is separate from the admin: the storefront is a small bundle, and everything staff use sits in Shopify admin.

   Alongside the features list I made a regression checklist of behaviours that must never break, so the later rounds of refinement could not quietly undo earlier work.

4. 04

   Choose a Shopify-native stack

   The app is a Shopify React Router app with Polaris admin pages and Prisma, a theme app extension for the storefront, and the Shopify App Proxy so the storefront talks to the app through a signed, same-domain route instead of an open backend.

   A single shared TypeScript package holds the text-fitting maths, the colour palette and the template schema, so the storefront, the editor and the server can never drift apart. Its fit function is checked against a reference implementation with hundreds of test cases.

5. 05

   Build the storefront customiser

   The storefront is a small Preact bundle under 30 KB gzipped, with a guided flow (Colours, Design, Review), undo/redo, zoom, and a mobile layout with a bottom sheet, a step progress bar and a sticky primary button.

   It supports two journeys: a quote flow for made-to-order products, and a purchase flow where colours are locked to the variant and lettering is an opt-in that adds a fee line to the cart.

6. 06

   Reach a working prototype, then expand it

   The prototype came first: layers composing into one product, recolouring, a logo and lettering, and a quote at the end. It worked end to end on a development store early, which let me test with real products before building anything around it.

   Everything after that (real-theme fixes, the staff editor, quote queue, proof and approval, automation and analytics) was built on top of the prototype rather than beside it, so the whole system shares one renderer and one set of rules.

7. 07

   Fix the problems only a real theme reveals

   My first test in a real theme went badly: the customiser was boxed in and the buttons did nothing. The causes were all in the theme, not my test page. Ancestor transforms clipped the overlay, the theme's 10px root font size shrank everything, and a global CSS rule hid empty divs, which hid my modal's host element.

   The fix was to render the customiser into a shadow root attached to the page body, with every size in pixels, and to add a deliberately hostile theme to my test page so none of it can regress. The lesson I took: test widgets in the real page, not an empty one.

8. 08

   Get the colour and texture right

   Early previews looked duller and flatter than real fabric. Measuring the layer images showed why: a fixed brightening curve pushed up to two thirds of the pixels in some layers to pure white, which erased the weave, seams and folds.

   I replaced it with a per-image tone stretch that measures each layer once and maps its range without clipping, so the brightest fabric shows exactly the chosen colour and the texture survives. Tests pin the behaviour so it cannot silently change.

9. 09

   Build the staff template editor

   Merchants need to manage many product designs, so I built an editor that uses the same renderer and fit maths as the storefront, so what staff see is what customers get. It has drag, resize and rotate with snapping, a layers panel, view tabs, a safe-area box, zoom and pan, undo/redo, version history with restore, and a built-in health check.

   That check catches problems customers would never report, such as broken colour links between layers. A "Test as customer" button opens the live customiser on the draft in a sandbox, so nothing is sent.

10. 10

    Move quotes into Shopify admin

    Quotes live in the app: a queue with status tabs and counts, an overdue view, search, quick views, sorting, bulk status changes and CSV export, plus a detail page with the rendered design, files, a notes timeline, pricing, assignee and follow-up date. A printable production sheet gives the workshop everything on one page.

    Saved message templates fill in the customer's name, reference and product, and every contact is logged on the timeline.

11. 11

    Add proof, approval and follow-up automation

    Staff can open a saved design in a refine editor, adjust it, and send the customer a private link. The customer approves or requests changes, and the quote moves automatically. Reminders go out on a schedule and stop when the customer answers, the quote closes or they opt out.

    Email is built behind a provider switch (log, Resend or SMTP), defaulting to a mode where nothing leaves the server, so I could test the whole flow safely.

12. 12

    Measure where customers give up

    The storefront sends one anonymous step per visit (open, colours, design, review, done). The admin home shows where customers drop off over the last 30 days and calls out the biggest drop, so the merchant can see which designs and steps lose people.

13. 13

    Harden it, then test it hard

    A stress-testing round found and fixed real bugs: duplicate reminders, orphaned proof links, conflicting customer answers, double submits, unsafe SVG and URL logos, oversized quotes and template save races.

    Alongside that, a production-build test fails if server-only code leaks into a client bundle, and an accessibility pass added keyboard-navigable colour swatches, a correct modal focus trap and reduced-motion support.

Where it stands

This app is not on the Shopify App Store yet. The status above is where the work stands today.

Tech stack

• Shopify React Router app with Polaris admin pages and Prisma.
• Theme app extension: a Preact storefront bundle (under 30 KB gzipped) rendered inside a shadow root so theme CSS cannot break it.
• Shopify App Proxy for signed storefront-to-app requests, so there is no open public backend.
• A shared TypeScript package for the fit maths, palette and template schema, so the storefront, editor and server use identical logic.
• Automated tests across the app and storefront, including a production-build test.