|
Problem:
A made to order brand needed customers to configure products across multiple option segments, finish, stand, socket, cord, and shade, with accurate pricing per combination and a single clean line item per product in the order. Shopify does not support per line price overrides without Plus, and no available app could handle the compatibility rules between segments or the manufacturing SKU output the client required.
Solution:
A Metaobject driven configurator block paired with a custom Remix and TypeScript Shopify app deployed on Cloudflare Workers. The app receives only Metaobject IDs from the storefront, recalculates every configured price on the server using real data, and creates a Draft Order checkout. The only path to per line price overrides without Shopify Plus.
How it works:
Each option segment is a Shopify Metaobject with its own code, customer label, price difference, swatch image, and hardware color. Product Metafields attach the compatible option sets to each product. When a shopper submits their configuration, the theme sends only Metaobject IDs to the App Proxy endpoint. Prices are never trusted from the browser. The app fetches the real price of each option via Admin GraphQL, adds it to the live variant price, calls draftOrderCreate with a price override, and sends back a checkout URL for immediate redirect. Compatibility logic between segments disables shade options in real time when their hardware color does not match the selected stand. A separate order flow with state stored in localStorage handles customers building orders across multiple products in one session.
Tools:
Store pickup sorted by distance and availability, directly in the collection filter. No browser permission prompt and no app.
Sitewide structured data built in pure Liquid, zero apps, zero errors, so AI search engines and Google can read the store correctly.