Architectural Glass Custom Shopify Configurator

The product could not be priced cleanly with a simple static option picker. Customers needed to enter exact dimensions, choose safety options, and select fabrication details, while the store still needed controlled pricing records.

The earlier app-based workflow generated variants dynamically during configuration. That approach created abandoned one-off variants, made Shopify administration harder to manage, exposed temporary configurations as product records, and increased the chance of duplicate-variant or browser-navigation failures.

Our work replaced runtime variant generation with a controlled Shopify pricing architecture. Customer-facing controls collect dimensions and fabrication choices, while JavaScript calculates the pricing inputs and synchronizes the native Shopify option selectors.

From the live storefront and project code, the measured area is calculated as width multiplied by height divided by 144. That square footage is rounded up into predefined square-foot buckets from 2 through 10 square feet. Edge pricing is calculated from the panel perimeter, converted into feet, and mapped into edge-charge buckets from 1 through 14 feet when an edge treatment uses a tiered charge.

Product-specific JSON controls which edge treatments are available. Some products expose only a seamed edge, while others expose polish, micro-polish, or beveled options. Tempering is handled through the existing Shopify variant option structure rather than by creating new variants during the customer session.

The interface keeps the storefront interaction simple: customers see measurement fields, safety choices, edge cards, quantity, and a live total, while Shopify receives a controlled variant selection through its normal product form.