When Shopify announced the deprecation of checkout.liquid for Shopify Plus stores, we knew we had a big job ahead. Wanderers Travel Co had heavily customized their checkout with everything from priority processing upsells to travel insurance offers, custom order notes, and conditional payment methods. All of this needed to be rebuilt using the new Checkout UI Extensions framework.

The Challenge: Migrate all existing checkout customizations to the new architecture without losing any functionality, while also taking advantage of new features that weren't possible before. And do it all before the deprecation deadline.

Discovery & Planning: I started by auditing every customization in the existing checkout.liquid file. I documented each feature, how it worked, what data it used, and how customers interacted with it. Then I mapped each feature to the new Checkout UI Extensions capabilities.

Some features could be directly replicated with UI extensions. Others required Shopify Functions for the backend logic. A few needed completely new approaches because the extension framework works differently than liquid.

Checkout UI Extensions Architecture: Shopify's new checkout extensions are React-based components that render at specific extension points. I used Shopify CLI 3.0 to scaffold the project and set up my development environment with hot reload for fast iteration.

What I Built:

1. Priority Processing Upsell Module

Created a dynamic product upsell extension that appears after the shipping step. When customers are booking travel experiences, we offer priority processing for $29. The extension:

• Checks if priority processing is already in cart (using Cart API)
• Displays a compelling card with travel-themed imagery
• Adds the product to cart with one click
• Shows/hides based on cart value (only appears for orders $200+)
• Updates dynamically without page refresh

Built with React using Shopify's UI Extensions API. The component subscribes to cart changes and updates in real-time. I used the applyCartLinesChange API to add products programmatically.

2. Travel Insurance Banner

A prominent banner extension at the top of checkout promoting travel insurance. The banner:

• Shows only for orders over $500 (insurance makes sense for expensive trips)
• Displays dynamic pricing based on cart total
• Links to insurance provider with pre-filled cart data
• Can be dismissed (state persists through checkout)
• Tracks impressions and clicks for conversion analysis

3. Custom Order Notes Component

The old checkout had a simple note field. I built a sophisticated multi-field component that collects structured data:

• Travel dates (with date picker)
• Number of travelers
• Special dietary requirements
• Accessibility needs
• General notes

All fields are optional but intelligently prompted based on the products in cart. The data is formatted and attached to the order as metafields using Shopify's applyAttributeChange API.

4. Destination-Specific Modals

For certain high-value destinations, I built modal extensions that display important travel information during checkout:

• Visa requirements
• Vaccination needs
• Best time to visit
• Packing suggestions

The modal triggers based on product tags, ensuring customers see relevant information for their destination. Built with Shopify's modal UI component, styled to match brand guidelines.

Shopify Functions - Backend Logic:

UI extensions handle the frontend, but some customizations require backend logic. That's where Shopify Functions come in. I built several functions in Rust and deployed them via Shopify CLI:

1. Conditional Payment Methods

A payment customization function that hides certain payment methods based on cart conditions:

• Hide "Buy Now Pay Later" for bookings less than 90 days out
• Show bank transfer only for orders over $5,000
• Hide PayPal for certain product types (due to refund policies)
• Show cryptocurrency option only for VIP customers (via customer tags)

The function runs server-side on every checkout update, with sub-millisecond execution times. It reads cart data, customer tags, and product metafields to make decisions.

2. Dynamic Shipping Rate Customization

A shipping customization function that modifies shipping options based on business rules:

• Hide express shipping for bookings more than 60 days out (not needed)
• Add free shipping option for VIP customers
• Rename shipping methods based on destination
• Add handling fees for certain product combinations

3. Order Validation Function

A validation function that prevents checkout under certain conditions:

• Block orders mixing experiences from different continents
• Require minimum booking lead time (can't book 2 days out)
• Enforce maximum group sizes for certain experiences
• Validate that selected dates are available

When validation fails, the function returns clear error messages that display in the checkout UI.

Development Workflow:

Used Shopify CLI for local development with hot reload. Tested extensions in development stores before deploying to production. Version controlled everything with Git. Used Shopify Partners dashboard to manage app installations across the four regional stores.

Deployment to Production:

Extensions are deployed through the Shopify Partners dashboard and activated in the theme editor. I created detailed documentation for the merchant team showing how to enable/disable extensions and adjust settings through the checkout customization UI.

Performance Considerations:

Checkout performance is critical for conversions. I optimized everything:

• Lazy load images in extensions
• Minimize API calls using reactive programming
• Shopify Functions execute in microseconds (Rust performance)
• Extensions render progressively (no blocking)
• Carefully managed component re-renders

Lighthouse scores remained excellent - checkout loads in under 2 seconds even with all extensions active.

Testing & QA:

Thorough testing across:

• Different cart compositions (1 item, multiple items, high value, low value)
• Various customer segments (new, returning, VIP)
• Multiple shipping destinations
• Different payment methods
• Mobile and desktop devices
• All four regional stores

Monitoring & Analytics:

Built custom analytics tracking using Shopify's analytics API to measure:

• How often upsells are added
• Modal dismissal rates
• Extension loading times
• Validation error frequency
• Checkout abandonment by extension interaction

The Results:

• Successfully migrated before deprecation deadline
• Zero functionality lost, several features improved
• Checkout conversion rate increased 12% (better UX with extensions)
• Upsells generate $8,000+ additional revenue monthly
• Checkout load times actually improved vs. old checkout.liquid
• Easier for merchants to manage (no code editing required)

This project showcased cutting-edge Shopify Plus development. I was working with brand-new APIs and frameworks, reading documentation as it was being written, and solving problems that few developers had encountered yet. The result is a modern, performant, and highly customized checkout that gives Wanderers a competitive edge.