Try Stiles — a custom JS product configurator inside Shopify
Personalized crossword wall art, built around the customer's own words — a fully custom JavaScript configurator with real-time preview, dynamic letter-based pricing, and mobile-first UX.
- Client
- Try Stiles
- Industry
- Personalized Products
- Type
- Custom Shopify Configurator
The buying experience is the product
Try Stiles sells personalized crossword wall art built from names and custom words. The configurator isn't a feature — it's the storefront.
We built it from scratch in JavaScript inside Shopify: three custom inputs, an automatic crossword layout generator, live preview, color + material + addon controls, and dynamic letter-based pricing.
Three custom words → an automatic intersecting layout, rendered in real time.
Visual controls that recolor the preview without page reload.
Price updates live as the customer types — passes cleanly into Shopify checkout.
Five things Shopify doesn't ship out of the box
Complex product personalization flow
Three inputs, multiple control surfaces, one preview — all in one focused frame.
Dynamic crossword generation
Layouts had to render valid intersections from arbitrary customer words.
Letter-based pricing calculations
Price had to update live and survive the trip into Shopify checkout.
Mobile configurator experience
Touch-first inputs, gesture-friendly preview, no keyboard-blocks-CTA traps.
Real-time product previews
Every change had to redraw instantly without dropping frames on mid-range phones.
Five engineering moves — one configurator
Custom crossword generation algorithm
Real intersection-finding logic, deterministic + testable.
Dynamic pricing engine
Letter count + addons → live total, passed through to Shopify checkout.
Real-time preview system
Minimal-diff render path — only changed cells redraw.
Mobile-first configurator UX
Touch-friendly inputs, sticky live-total bar, safe-area-aware controls.
Addon pricing functionality
Toggleable addons, individually priced, reflected in the live total.
Three features doing most of the work
Automatically creates crossword-style layouts from customer input.
Updates the product design instantly.
Calculates pricing automatically based on letter count.
Shopify-native, no third-party builder
The configurator earned its place in the funnel
“Alpesh is one of the best developers I've ever worked with — and I've worked with a lot. The quality and speed of their work was incredible. I continue to use him for projects.”
RL Ross LarsonCEO, Stiles · Verified Trustpilot 5★
