checkout-customization

Checkout Customization

When to use this skill

Use this skill when:

• Building checkout UI extensions
• Adding custom fields to checkout
• Implementing payment customizations
• Creating post-purchase upsells
• Extending customer account pages
• Customizing the checkout experience
• Adding custom validation logic

Overview

Checkout customization uses extensions that are:

• Upgrade-safe - Work with Shop Pay and new features
• Performant - Run in a sandboxed environment
• Secure - Limited access for security

Extension Types

Type	Description
Checkout UI	Add custom UI to checkout
Post-purchase	Upsells after order
Customer Accounts	Extend account pages
Thank You	Customize order confirmation
Order Status	Extend order tracking

Getting Started

1. Create Checkout Extension

# In an existing app
shopify app generate extension

# Select: Checkout UI

2. Extension Structure

extensions/
└── checkout-ui/
    ├── src/
    │   └── Checkout.jsx
    ├── locales/
    │   └── en.default.json
    └── shopify.extension.toml

3. Configuration

# shopify.extension.toml
api_version = "2025-01"

[[extensions]]
type = "ui_extension"
name = "Custom Checkout"
handle = "custom-checkout"

[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.block.render"

Checkout UI Extensions

Basic Extension

// src/Checkout.jsx
import {
  reactExtension,
  Banner,
  useApi,
  useTranslate,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.block.render", () => (
  <Extension />
));

function Extension() {
  const translate = useTranslate();

  return (
    <Banner title={translate("welcomeMessage")}>
      Thank you for shopping with us!
    </Banner>
  );
}