Kit Customization Widget
2024
Interactive widget for Shopify that lets customers personalize products in real time. Features dynamic filtering by multiple attributes, live inventory checks, and a canvas-based preview with curved text, custom fonts, and multi-color effects.
// problem
The client needed a way for customers to fully personalize kit products (sports uniforms) directly in the Shopify storefront — selecting colors, adding custom text with curved rendering, and previewing the result in real time before purchasing.
// approach
Built a vanilla JavaScript widget embedded in a Shopify theme section. Used the HTML5 Canvas API for real-time rendering of curved text, custom fonts, and multi-color effects. Integrated Shopify's GraphQL Storefront API for live inventory checks per variant combination.
// outcome
Delivered a fully functional customization widget integrated into the client's live Shopify store. Customers can preview personalized kits in real time, reducing back-and-forth with the client and improving conversion on custom orders.