§ 01Context
A direct-to-consumer brand on Shopify wanted to guide shoppers to the right product with an interactive, on-storefront recommendation quiz — and then manage the whole thing themselves. Off-the-shelf quiz apps were either too rigid, too generic, or forced their data and branding into someone else's box. What they actually needed was a custom Shopify app: their logic, their look, their data — running natively inside Shopify.
§ 02Challenge
A "quiz on the storefront" sounds simple until you list the real constraints. It had to render on the live theme without hard-coding into the theme (so a theme update couldn't break it). Merchants needed a real admin to edit questions, logic and recommendations — one that felt like part of Shopify, not a bolted-on iframe. It needed a backend to hold the logic and results, respect Shopify's data and privacy rules, and ultimately pass Shopify App Store review, which is unforgiving about auth, webhooks and GDPR.
The brief was "a quiz." The build was a full Shopify app — three surfaces that had to feel like one.— Engagement scope, week one
§ 03Architecture
We split the app into three surfaces that share one contract:
- Storefront — a theme app extension. The quiz renders through Shopify's theme app extension mechanism, built with lightweight Lit web components. Merchants drop it in via the theme editor; no theme code is touched, so theme updates never break it.
- Admin — embedded, native-feel. An embedded app built on Remix and Shopify Polaris, so managing questions, branching logic and product recommendations looks and behaves like the rest of the Shopify admin.
- Data & delivery. Shopify App Proxy and metafields connect storefront and admin cleanly, with a Node/Express backend and Prisma for the app's own logic and state.
§ 04What we shipped
Four layers, built to Shopify's standards and to survive App Store review:
A theme app extension rendered with Lit web components — fast, framework-light, and safe against theme updates.
A Remix + Polaris admin so merchants edit questions, logic and recommendations inside a native-feeling Shopify surface.
App Proxy + metafields tie the surfaces together, over a Node/Express + Prisma backend that owns the app's logic and state.
HMAC-verified webhooks and the mandatory GDPR data webhooks, wired and tested — then taken through App Store review to approval.
The hard part of a Shopify app isn't the quiz — it's making three surfaces feel like one, and passing review.
— Engagement close-out
§ 05Result
- A published Shopify app. Approved through App Store review — auth, webhooks and GDPR handling all to Shopify's bar.
- No theme lock-in. The storefront quiz ships as a theme app extension, so the merchant's theme updates never break it.
- A merchant admin they own. A Remix + Polaris surface to run the quiz and recommendations without touching code.
- A clean, extensible base. A typed Node/Express + Prisma backend the brand can grow — new quiz types, new logic, new surfaces.
This case shows how we take a "simple" storefront idea and deliver it as a real, compliant, App-Store-grade Shopify app — front end, admin, and backend.
— The full engineering write-up is on the blog: Building a Custom Shopify App: Theme Extension to App Store. Building something on Shopify? Start a conversation.
