TOPCODE Upsell 2.0: Functions-powered, zero render-blocking

TOPCODE Upsell 2.0, released April 15 2026, is not an update to version 1.x — it is a complete rewrite. The version 1.x architecture was built in early 2023 when Shopify Functions were in beta and the most reliable way to implement cart-level upsell logic was still client-side JavaScript layered over the cart REST API. That architecture served its purpose: it shipped, it worked for merchants, and it generated real revenue lifts. It also accumulated three years of architectural constraints that compounded as Shopify's platform evolved. Version 2.0 addresses all of them by treating Functions and Checkout UI Extensions as the primary execution primitives rather than the aspirational ones.

Why we rebuilt

The 1.x architecture had a fundamental performance problem that worsened with merchant adoption. Upsell offer evaluation happened entirely in the browser: the cart page loaded, our JavaScript bundle loaded (42 KB gzipped), the script fetched the current cart from the Cart API, evaluated the offer rules client-side against the cart contents, and then rendered the upsell widget into a reserved DOM slot. On a median mobile connection, this sequence took 600-900ms after the page was already visible to the shopper — a layout shift that shoppers could see, that slowed perceived performance, and that Google's Core Web Vitals flagged as a Cumulative Layout Shift issue. For our largest merchant accounts running 10+ upsell rules with complex conditional logic, evaluation times occasionally exceeded 1.2 seconds on mobile 4G.

The second driver was the Shopify Scripts deprecation. The 1.x "cart transform" feature — which allowed injection of promotional product lines directly into the cart (free gift with purchase, case-pack consolidation, bundle construction) — used a Shopify Script under the hood. Scripts were formally deprecated by Shopify in 2023 with a hard sunset date, meaning any merchant using the cart transform feature was on borrowed time. Rather than maintain two separate offer evaluation paths (Scripts for cart transforms, JavaScript for everything else) through an extended deprecation window, rebuilding everything on Functions gave us a single, modern, supported execution path for all offer logic in the same runtime.

The third driver was merchant UI feedback collected across 18 months of 1.x deployments. The admin interface was built with a custom React component library that predated Shopify Polaris as the standard design system for Shopify apps. It looked dated, behaved inconsistently on mobile devices in the Shopify Admin, and violated Shopify Admin UX conventions in ways that were small but cumulatively frustrating for merchants who used the Shopify Admin all day. Every deviation from Admin conventions meant a support ticket or a merchants spending time learning TOPCODE-specific interaction patterns instead of configuring offers. The rewrite was the right moment to move entirely to Polaris and App Bridge 4, making upsell configuration feel native to the context merchants work in.

Migration path for 1.x users

For merchants using 1.x offer types that do not use the legacy Scripts cart inject feature, migration is largely automated. Install TOPCODE Upsell 2.0 from the app store. The app detects your existing 1.x installation and presents an import wizard that reads your current rule configuration from the 1.x database and translates it to the 2.0 metafield JSON schema. The wizard flags any rules it cannot translate automatically (typically rules that referenced 1.x's proprietary rule operators that do not have direct equivalents in the 2.0 schema) and presents them for manual review. Once you confirm the translated rules in the 2.0 interface, you can run both apps in parallel during a testing period before deactivating 1.x.

The presentation layer migration is separate from the rule migration. The 1.x theme app block (which rendered the upsell widget on the cart page template via injected JavaScript) is replaced in 2.0 by a Checkout UI Extension. You add the TOPCODE Upsell 2.0 extension in Online Store → Customize → Checkout sections. The 1.x theme app block will automatically suppress itself when it detects the 2.0 Checkout UI Extension is active on the same checkout, so both can coexist during your testing window without showing duplicate upsell widgets. Once you confirm the UI Extension is rendering correctly in a test checkout, remove the 1.x theme app block from your theme via the theme editor.

After completing both the rule migration and the UI migration, run a full checkout QA pass across: a cart with no upsell-triggering items (should show no upsell), a cart triggering a single offer, a cart triggering multiple offers (verify the priority logic matches your intent), a B2B buyer checkout (verify only catalog-eligible upsells appear), and a cart on mobile (verify the UI extension renders above the fold without layout shift). Most migration issues surface in this QA step, not during the configuration steps.

What's next

The 2.1 release is targeted for Q3 2026 and will ship three significant additions. First, AI-assisted offer suggestion: the app will analyse your order history to surface high-lift offer combinations, ranking candidates by estimated incremental AOV based on historical co-purchase data. Merchants will be able to accept or reject AI suggestions and launch them directly as A/B tests.

Second, post-purchase upsell support via Shopify's post-purchase extension point. This extends the TOPCODE Upsell offer surface beyond the cart into the order confirmation page, where conversion rates for complementary product offers are typically higher than at cart because the buyer has already committed to a purchase. Third, multi-store rule sync for Plus merchants running multiple expansion stores. The goal: write a upsell rule once in a primary store, push it to all stores from a single dashboard with per-store override capability. This is the feature our largest Plus customers have requested most consistently since 2.0 launched.