50+ variants per product. Zero page reloads. A picker that actually converts.
The default Shopify variant picker breaks when product complexity grows. A DTC brand with configurable products and 50+ variants needed a selection experience that matched the product quality.
50+
Variants per product
5
Development phases
0
Page reloads on variant change
Ongoing
Contract since launch
The default picker made the product look cheap.
Shopify's Dawn theme variant picker is built for simple products. A dropdown list of 50+ variants is not a selection experience - it is a test of patience.
Unavailable combinations were not hidden, leading to customer frustration when a selected variant was out of stock. Price updates required a page reload.
What they rejected before a custom build:
- -Shopify default - dropdown list, ugly at 50+ options
- -Third-party apps - cart conflicts and slow load times
- -Custom section = the only real option
Swatch selectors. Live stock. No reload.
Custom Liquid + JavaScript built on the Dawn base theme.
Swatch selector
Each variant attribute (color, size, material) renders as a visual swatch grid instead of a dropdown. Swatches are built in Liquid using metafields and variant data - no third-party app dependency.
Live stock indicators
Each swatch shows live stock state: available, low stock, or out of stock. Unavailable combinations are visually greyed and disabled. Prevents customers from selecting a variant they cannot buy.
Zero-reload price updates
Selecting a variant updates the price, compare-at price, and SKU display instantly via the Shopify Section Rendering API. No page reload, no flash, no delay.
URL state
The selected variant is written to the URL on every change. Shareable links land on the exact variant the customer selected. Works correctly with browser back/forward.
Add to cart
Add to cart button is disabled until a complete variant is selected. Button copy changes to reflect stock state. Cart request uses the Shopify Cart API directly.
Phased delivery
Work delivered in 5 phases: base picker (phase 1), swatch rendering (phase 2), stock logic (phase 3), price + URL state (phase 4), QA + cross-browser testing (phase 5). Each phase handed over before the next begins.
What was used.
A picker that matches the product.
The variant picker handles the full product catalog without performance issues. Customers can navigate 50+ variant combinations visually, see stock state at a glance, and add to cart without a page reload.
The engagement has expanded since launch. Phase 5 added cross-browser testing and accessibility improvements. Additional features are scoped and priced phase by phase as needed.
Client name withheld at their request. Reference available on request.
Your products are complex. Your picker should handle it.
We build Shopify theme features that the platform's defaults can't cover. Fixed price, phased delivery, you own the code.
Get your Pipeline AuditFixed price. Working Pipeline Guarantee on every build.