Shopify Checkout Suite
A three-extension Shopify checkout suite: a Rust/WASM volume-discount engine, a one-click upsell block, and a live discount-progress nudge.
One item in the cart: the nudge shows 1-of-3 progress toward the 10% tier, the upsell offers ski wax
One click adds the wax to the order and the nudge recounts: 1 item to go
Three items: the Rust function applies 10% (−$180) while the nudge sells the 15% tier
Five items: maximum-tier banner, −$450 applied by the WASM engine on a $3,000 cart
// OVERVIEW
About the project
Shopify shut down Scripts on June 30, 2026, and checkout.liquid dies for non-Plus stores on August 26. Every merchant who customized pricing or checkout the old way has to rebuild on Shopify Functions and Checkout UI Extensions. To work in that migration niche I built the whole pattern end-to-end on a Plus development store: a pricing engine plus the checkout UI that makes it sell.
The engine is a Shopify Function written in Rust and compiled to WebAssembly: volume tiers (10% at 3+ items, 15% at 5+), an extra bonus for customers tagged VIP, and products tagged final-sale excluded from both the count and the discount. Tiers live in a JSON metafield, so a merchant changes percentages without touching code. The release binary is 94 KB and a pricing run costs about 43,000 instructions, 0.4% of Shopify's 11-million budget. Five fixture tests drive the compiled WASM through Shopify's own function-runner.
On top of it sit two Preact checkout extensions, 9.2 KB and 8.6 KB compressed against the 64 KB limit. The upsell block offers a merchant-picked product with a one-click add. The nudge block watches the cart-lines signal and sells the next tier: add one item in checkout and its copy recounts from "2 items away from 10% off" to "1 item away" without a refresh. When the buyer reaches five items, the function takes −$450 off a $3,000 cart and the nudge switches to a success banner; engine and UI read the same cart state.
All screenshots come from the live buyer checkout on the dev store, not mockups, and the Live Demo button opens that same checkout with three items preloaded, so the 10% tier is already applied. Enter the store password ohtsol, then open the link once more: Shopify's password page drops the cart redirect. The three parts ship as separate public repos, each with its own README and proof: the Rust function, the upsell block and the progress nudge.
// KEY FEATURES
What makes it work
Rust/WASM discount engine
Tiered volume pricing (10% at 3+ items, 15% at 5+) on Shopify's unified Discount Function API, with a VIP customer-tag bonus, final-sale exclusions, and tiers configurable through a JSON metafield, so changing the numbers needs no redeploy.
One-click checkout upsell
The merchant picks a product variant in the checkout editor; buyers add it to the order with one click via applyCartLinesChange, with live price and compare-at data from the Storefront API.
Live discount-progress nudge
Subscribes to the cart-lines signal and recounts on every change: progress bar, tier copy, and a success state when the best tier is reached, without requesting any extra permissions.
Merchant-editable everything
Settings schemas in the extension TOML render native checkout-editor controls (variant picker, text fields), so tiers and the upsell offer are changed by the merchant, not by a developer.
WASM test harness
Five fixture tests run the compiled binary through Shopify's official function-runner, asserting tier math, final-sale exclusions, the VIP bonus, and metafield config overrides.
// RELATED WORK