How Shopify Plus Merchants Are Using Checkout UI Extensions to Increase AOV
Learn how Shopify Plus merchants use Checkout UI Extensions to increase AOV with upsells, subscription toggles, shipping bars, and smarter checkout experiences.
Introduction
Every second, thousands of shoppers reach the checkout page on Shopify stores and abandon it. Cart abandonment rates hover around 70% across eCommerce, meaning most businesses lose seven out of every ten potential buyers at the final step.
The question is: what separates the stores that convert, from those that don't?
The answer, more often than not, lies in what happens inside the checkout experience.
With Shopify Checkout UI Extensions, merchants now have a powerful, native way to customize what customers see and do during checkout without touching core Shopify logic or breaking compliance requirements. Whether you want to add a trust badge, upsell a product, collect custom data, or display a countdown timer, checkout UI extensions let you do all of that in a structured, Shopify-approved way.
In this article, we'll walk through 7 real-world Shopify checkout UI extension examples that are proven to increase conversion rates, along with implementation context and the human intent behind each one.
What Are Shopify Checkout UI Extensions?
Before diving into examples, let's clarify the basics.
Shopify Checkout UI Extensions are a set of APIs and UI components provided by Shopify that allow developers to inject custom UI blocks into the checkout flow. They are part of Shopify's extensibility model (introduced with Checkout Extensibility in Shopify Plus) and are designed to be:
- Safe - Extensions run in a sandboxed environment and cannot break the native checkout flow.
- Performant - They load asynchronously and don't slow down page speed.
- Composable - You can stack multiple extensions at different points in the checkout.
- Compliant - They support Shop Pay and work within Shopify's payment and data handling standards.
Shopify checkout UI extensions use React and Shopify's UI component library (called Polaris Checkout Components). They are deployed via the Shopify CLI and configured through the shopify.extension.toml file.
Extensions can be placed at specific extension targets such as:
- purchase.checkout.block.render - A flexible block that renders anywhere in checkout
- purchase.checkout.contact.render-after - Renders after the contact section
- purchase.checkout.shipping-option-item.render-after - Renders after each shipping option
- purchase.checkout.payment-method-list.render-before - Renders before payment methods
- purchase.thank-you.block.render - Renders on the thank you / order confirmation page
Understanding these targets is critical because where you place an extension determines how much it impacts the buyer's psychology and actions.
Why Checkout UI Extensions Matter for Conversion
Most merchants optimize their product pages and landing pages obsessively, while ignoring checkout. But checkout is where buying intent is highest - customers have already made the emotional decision to purchase. The job of your checkout experience is simply to not break that intent.
Done right, checkout UI extensions let you:
- Reinforce trust at moments of hesitation
- Offer relevant upsells when wallet is already out
- Reduce friction through smart data pre-fill or messaging
- Build urgency without being manipulative
- Collect information that improves post-purchase experience
Let's look at seven examples that do exactly that.
1. Trust Badge & Security Assurance Extension
What It Does
This extension renders a row of trust icons - SSL lock, money-back guarantee, secure payment logos - directly inside the checkout page, typically below the order summary or above the "Complete Order" button.
Why It Works
Checkout is where purchase anxiety peaks. Shoppers second-guess themselves. A trust badge extension speaks directly to that hesitation by visually reaffirming that the transaction is safe, the store is legitimate, and the purchase is low-risk.
Studies have shown that displaying security seals near the payment section can increase conversion rates by up to 42% in A/B tests.
Implementation Overview
import {
reactExtension,
Banner,
InlineLayout,
Icon,
Text,
} from "@shopify/ui-extensions-react/checkout";
export default reactExtension(
"purchase.checkout.payment-method-list.render-before",
() => <TrustBadgeExtension />
);
function TrustBadgeExtension() {
return (
<InlineLayout spacing="base" columns={["fill", "fill", "fill"]}>
<Banner status="success">🔒 SSL Secured</Banner>
<Banner status="info">✅ 30-Day Returns</Banner>
<Banner status="info">🛡️ Buyer Protection</Banner>
</InlineLayout>
);
}Human Intent
Shoppers at this stage are thinking: "Is this safe? Will I get my money back if something goes wrong?" The trust badge answers those questions before the shopper even has to ask.
2. Post-Purchase Upsell Extension (Thank You Page)
What It Does
After the order is placed, an extension renders on the thank you page offering a one-click upsell - a complementary product at a discounted price, without requiring the customer to re-enter payment information.
Why It Works
The moment after a purchase is psychologically unique. The customer has just made a commitment, which makes them more receptive to additional offers and this is what behavioral economists call the foot-in-the-door effect. Post-purchase upsells have been known to add 10–15% additional revenue to existing orders.
Implementation Overview
import {
reactExtension,
ProductOffer,
Button,
useApplyCartLinesChange,
} from "@shopify/ui-extensions-react/checkout";
export default reactExtension(
"purchase.thank-you.block.render",
() => <PostPurchaseUpsell />
);
function PostPurchaseUpsell() {
const applyCartLinesChange = useApplyCartLinesChange();
const addUpsellProduct = async () => {
await applyCartLinesChange({
type: "addCartLine",
merchandiseId: "gid://shopify/ProductVariant/XXXXXXX",
quantity: 1,
});
};
return (
<BlockStack spacing="loose">
<Text size="large" emphasis="bold">
Wait — You Might Also Love This
</Text>
<Text>Add our bestselling accessory at 20% off, just for you.</Text>
<Button kind="primary" onPress={addUpsellProduct}>
Add to My Order
</Button>
</BlockStack>
);
}Human Intent
The customer's mindset here is: "I just bought something I'm excited about." An upsell that complements that purchase feels like a helpful recommendation, not a hard sell.
3. Countdown Timer / Limited-Time Offer Extension
What It Does
A real-time countdown timer is displayed in the checkout, showing how much time is left on a promotion, free shipping threshold, or flash sale.
Why It Works
Scarcity and urgency are two of the most well-documented conversion drivers in behavioral psychology. A countdown timer converts browsers into buyers by activating FOMO (Fear of Missing Out). When used honestly (i.e., the offer genuinely expires), this tactic is ethical and highly effective.
Implementation Overview
import {
reactExtension,
Banner,
Text,
} from "@shopify/ui-extensions-react/checkout";
import { useState, useEffect } from "react";
export default reactExtension(
"purchase.checkout.block.render",
() => <CountdownTimer />
);
function CountdownTimer() {
const [timeLeft, setTimeLeft] = useState(600); // 10 minutes in seconds
useEffect(() => {
const interval = setInterval(() => {
setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));
}, 1000);
return () => clearInterval(interval);
}, []);
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
return (
<Banner status="warning">
<Text emphasis="bold">
⏳ Your cart is reserved for {minutes}:{seconds < 10 ? `0${seconds}` : seconds} minutes!
</Text>
</Banner>
);
}Human Intent
The customer is hesitating. This extension speaks to the part of their brain that fears regret: "If I don't complete this now, I might lose the deal."
4. Order Note / Gift Message Custom Field Extension
What It Does
An extension adds a custom input field in the checkout that allows customers to leave order notes, gift messages, delivery instructions, or other special requests.
Why It Works
Many customers abandon checkout because they feel the form doesn't accommodate their specific situation. Adding a gift message field significantly reduces checkout friction for gifting occasions and improves customer satisfaction which in turn drives repeat purchases.
According to Shopify merchants, enabling gift messages during Q4 holiday seasons increases average order value by 8–12%, as customers tend to spend more when buying for others.
Implementation Overview
import {
reactExtension,
TextField,
useApplyAttributeChange,
} from "@shopify/ui-extensions-react/checkout";
import { useState } from "react";
export default reactExtension(
"purchase.checkout.contact.render-after",
() => <GiftMessageField />
);
function GiftMessageField() {
const [message, setMessage] = useState("");
const applyAttributeChange = useApplyAttributeChange();
const handleChange = async (value) => {
setMessage(value);
await applyAttributeChange({
key: "Gift Message",
type: "updateAttribute",
value,
});
};
return (
<TextField
label="Gift Message (optional)"
value={message}
onChange={handleChange}
multiline={3}
placeholder="Write a personal message for the recipient..."
/>
);
}Human Intent
The shopper thinks: "This is a gift for someone special and I want to make it personal." Giving them that ability removes a key emotional blocker.
5. Free Shipping Progress Bar Extension
What It Does
A progress bar extension dynamically shows how close the customer is to qualify for free shipping, based on the current cart total. It updates in real time as items are added or removed.
Why It Works
Free shipping is the #1 incentive for online shoppers globally, according to multiple NRF and Baymard Institute studies. Showing shoppers exactly how much more they need to spend to unlock it triggers a powerful psychological motivator and the goal-gradient effect where people accelerate effort as they get closer to a goal.
Merchants who implement this type of extension typically see a 15–25% increase in average order value.
Implementation Overview
import {
reactExtension,
ProgressIndicator,
Text,
BlockStack,
useCartLines,
} from "@shopify/ui-extensions-react/checkout";
const FREE_SHIPPING_THRESHOLD = 75; // $75 for free shipping
export default reactExtension(
"purchase.checkout.block.render",
() => <FreeShippingBar />
);
function FreeShippingBar() {
const cartLines = useCartLines();
const cartTotal = cartLines.reduce((sum, line) => {
return sum + line.cost.totalAmount.amount * line.quantity;
}, 0);
const remaining = Math.max(0, FREE_SHIPPING_THRESHOLD - cartTotal);
const progress = Math.min(100, (cartTotal / FREE_SHIPPING_THRESHOLD) * 100);
return (
<BlockStack spacing="tight">
{remaining > 0 ? (
<Text>
🚚 Add <Text emphasis="bold">${remaining.toFixed(2)}</Text> more for FREE shipping!
</Text>
) : (
<Text emphasis="bold">🎉 You've unlocked FREE shipping!</Text>
)}
<ProgressIndicator value={progress} />
</BlockStack>
);
}Human Intent
The customer thinks: "I'm so close it would feel wasteful not to add one more thing." The progress bar turns a passive checkout into an active, rewarding experience.
6. Product Upsell / Cross-Sell Block Extension
What It Does
An extension renders a "You may also need" or "Frequently bought together" block inside the checkout showing 1–3 product recommendations that the customer can add to their order with a single click.
Why It Works
Unlike post-purchase upsells, in-checkout upsells intercept the customer before the order is finalized which gives you the flexibility to bundle products into the same shipment. This is particularly effective for consumables, accessories, or add-ons that logically complement the cart contents.
Brands in the beauty, health, and electronics verticals report 18–30% of customers accepting at least one in-checkout upsell offer.
Implementation Overview
import {
reactExtension,
ProductThumbnail,
Button,
InlineLayout,
Text,
BlockStack,
useCartLines,
useApplyCartLinesChange,
} from "@shopify/ui-extensions-react/checkout";
export default reactExtension(
"purchase.checkout.block.render",
() => <InCheckoutUpsell />
);
function InCheckoutUpsell() {
const applyCartLinesChange = useApplyCartLinesChange();
const addProduct = async (variantId) => {
await applyCartLinesChange({
type: "addCartLine",
merchandiseId: variantId,
quantity: 1,
});
};
// These would normally be fetched dynamically based on cart contents
const recommendations = [
{
id: "gid://shopify/ProductVariant/111",
title: "Premium Warranty — 2 Years",
price: "$9.99",
},
];
return (
<BlockStack spacing="base">
<Text size="medium" emphasis="bold">
Customers Also Added
</Text>
{recommendations.map((product) => (
<InlineLayout
key={product.id}
spacing="base"
columns={["fill", "auto"]}
blockAlignment="center"
>
<Text>{product.title} — {product.price}</Text>
<Button
kind="secondary"
onPress={() => addProduct(product.id)}
>
Add
</Button>
</InlineLayout>
))}
</BlockStack>
);
}
Human Intent
The customer is in buying mode. Their thought is: "Oh, I almost forgot I needed that too." A well-timed recommendation feels like a helpful nudge, not an advertisement.
7. Subscription Option Toggle Extension
What It Does
For stores selling consumable or replenishable products, this extension adds a "Subscribe & Save" toggle directly in the checkout. Customers can switch from a one-time purchase to a recurring subscription with a visible discount applied instantly.
Why It Works
Subscription revenue is the holy grail of eCommerce. It increases customer lifetime value (LTV) exponentially and creates predictable cash flow. The problem is that most customers don't discover subscription options until after they've already checked out.
By surfacing the subscription toggle during checkout, at the exact moment the customer is committing money, conversion rates for subscription sign-ups increase by 20–35% compared to post-purchase or product-page offers.
Implementation Overview
import {
reactExtension,
Checkbox,
BlockStack,
Text,
Banner,
useApplyCartLinesChange,
useCartLines,
} from "@shopify/ui-extensions-react/checkout";
import { useState } from "react";
export default reactExtension(
"purchase.checkout.block.render",
() => <SubscriptionToggle />
);
function SubscriptionToggle() {
const [isSubscribed, setIsSubscribed] = useState(false);
const handleToggle = async (checked) => {
setIsSubscribed(checked);
// In a real implementation, this would swap the variant to
// the subscription-enabled selling plan variant
};
return (
<BlockStack spacing="base">
<Checkbox
id="subscribe-toggle"
checked={isSubscribed}
onChange={handleToggle}
>
<Text emphasis="bold">
Subscribe & Save 15% — Deliver Every 30 Days
</Text>
</Checkbox>
{isSubscribed && (
<Banner status="success">
✅ Subscription applied! You'll save 15% on every order.
</Banner>
)}
</BlockStack>
);
}
Human Intent
The customer thinks: "I'll definitely need this again anyway if I can save money by subscribing, why wouldn't I?" The key is making the value proposition crystal clear and removing the friction of signing up separately.
Best Practices for Building Shopify Checkout UI Extensions
Before you start building, keep these principles in mind:
1. Place Extensions Strategically
The extension target you choose dramatically changes how effective the extension is. Trust badges belong near the payment section. Upsells belong mid-checkout. Progress bars belong at the top.
2. Keep It Lightweight
Extensions should load fast and communicate clearly. Avoid cluttered designs. One clear message per extension performs better than five competing ones.
3. Test Before Deploying
Always test extensions in a development store before pushing to production. Use shopify app dev to preview extensions in real time.
4. Respect Shopify's Extension APIs
Shopify's sandbox environment limits what extensions can access. You cannot read raw payment data, access DOM elements outside your container, or make uncertified external API calls. Work within these boundaries exists to protect both merchants and customers.
5. A/B Test Everything
Extensions that increase conversion for one store may reduce it for another. Use Shopify's built-in analytics or a third-party tool to measure the impact of each extension independently.
Setting Up Your First Shopify Checkout UI Extension
Here's a quick-start guide for developers:
Step 1: Create a Shopify App
npm init @shopify/app@latest
Step 2: Add a Checkout UI Extension
shopify app generate extension
# Select: Checkout UI Extension
Step 3: Configure the Extension Edit shopify.extension.toml:
api_version = "2024-01"
[[extensions]]
type = "ui_extension"
name = "My Trust Badge"
handle = "trust-badge"
[[extensions.targeting]]
module = "./src/TrustBadge.jsx"
target = "purchase.checkout.payment-method-list.render-before"
Step 4: Run Locally
shopify app dev
Step 5: Deploy
shopify app deploy
Conclusion
Shopify checkout UI extensions are no longer a luxury for large-scale merchants; they're a fundamental conversion optimization tool that any serious Shopify Plus store should be using.
The seven examples covered in this article trust badges, post-purchase upsells, countdown timers, gift message fields, free shipping progress bars, in-checkout cross-sells, and subscription toggles each target a specific buyer psychology and a real moment of hesitation in the checkout journey.
The best part? None of these require rewriting your store or risking your checkout stability. Shopify's extensibility framework is designed to let you add powerful functionality safely, without breaking the native experience customers rely on.
Start with one or two extensions that align most directly with your store's biggest friction points. Measure the impact. Iterate. Then scale.
The checkout page is your highest-intent real estate. Shopify checkout UI extensions are how you make the most of it.
Frequently Asked Questions
Q: Are Shopify Checkout UI Extensions only for Shopify Plus?
A: Checkout extensibility, including UI extensions at the checkout step, is currently available to Shopify Plus merchants. The thank you page and order status page extensions may be available on other plans. Always check Shopify's official documentation for the latest plan requirements.
Q: Do checkout UI extensions affect page speed?
A: No. Shopify renders extensions asynchronously and in a sandboxed environment. They are designed to not block the core checkout rendering pipeline.
Q: Can I use third-party libraries inside a checkout UI extension?
A: You can use limited external packages, but Shopify's sandbox restricts DOM access and external network calls. Use Shopify's built-in UI components whenever possible for best compatibility.
Q: How many extensions can I have active at once?
A: Shopify allows multiple extensions to run simultaneously at different targets. However, stacking too many extensions in the same placement can create visual clutter and hurt conversions.
Q: Where can I find more official documentation?
A: Visit https://shopify.dev/docs/api/checkout-ui-extensions for complete API references, component libraries, and deployment guides.