Shopify checkout customization: what you can change and how

Shopify checkout customization means changing three things: how checkout looks (branding in the checkout editor), what it shows and asks for (Checkout UI extensions) and how it behaves (Shopify Functions for discounts, delivery, payment and validation). You can't edit checkout's HTML or add arbitrary JavaScript any more, but the supported tools cover most of what merchants used to hack in, and they survive Shopify updates.

What you can customize, and with what

Editing the checkout page in the admin

In your admin, go to Settings > Checkout and click Customize. The checkout editor lets you:

• set branding: logo, colours, typography, button style and so on;
• add app blocks from installed apps to targets on each step, and configure their settings;
• preview each step and each page, including Thank you and Order status.

Custom extensions from your own app appear in the same editor, so a merchandiser can place, configure or remove them without a developer.

Custom fields in checkout

A common request is a field that ends up on the order: a PO number, delivery instructions, a gift message or a VAT number. The current pattern:

1. A Checkout UI extension renders the field at the right target, for example after the delivery address.
2. It saves the value as a cart metafield, which Shopify copies to an order metafield when a matching order metafield definition allows it.
3. If the field is required, the extension or a validation Function blocks progress with a clear error until it's filled in.
4. The value then appears in the admin, in order notifications and in integrations.

The technical detail, with code, is in Checkout UI extensions. B2B checkouts have a native PO number field, so check that before building one.

Changing checkout logic

Discount, shipping and payment rules are not UI. They are Shopify Functions, which Shopify runs on its servers at the right moment in checkout:

• Delivery customization: hide express shipping for PO box addresses, rename a rate, or put local delivery first.
• Payment customization: hide cash on delivery above a cart value, or show invoice payment only for B2B customers.
• Validation: block a cart that mixes restricted items, or require a minimum quantity per product.
• Discounts: tiered, bundle or customer-specific rules the native discount types can't express.

See Shopify Functions.

What you can't do

• Rewrite checkout's HTML or CSS outside branding settings.
• Run arbitrary third-party JavaScript in checkout. Use web pixels for tracking.
• Reorder checkout's steps or remove required fields that Shopify controls.
• Collect card data yourself. Payment methods come from Shopify Payments and supported providers.

These limits are what keep checkout fast and secure, and they are also why extension-based customizations survive platform updates that broke checkout.liquid edits.

Build or install?

Many customizations are available as configurable apps, including Shopify's own Checkout Blocks app. If an app does what you need, use it. Custom development makes sense for business-specific logic, data that must reach an integration in a particular shape, or combinations of UI and Functions that no app offers. See Checkout Blocks vs a custom extension.

Examples of common requests and how they're built

• "Ask for a delivery date." A Checkout UI extension with a date picker, saving to a cart metafield copied to the order. The allowed dates come from a metafield your app keeps up to date, and a validation Function rejects dates that became unavailable.
• "Show a free shipping progress message." A Checkout UI extension that reads the cart subtotal and the threshold from a metafield. The free shipping itself is a native discount or a discount Function.
• "Only allow invoice payment for approved trade customers." A payment customization Function that hides the invoice method unless the customer or company has an approved flag in a metafield.
• "Stop orders with hazardous items going by air." A delivery customization Function that hides air services when the cart contains products with a hazmat metafield.
• "Collect a tax ID for business orders." A Checkout UI extension for the field plus a validation Function for the format. B2B customers may already have tax details on their company location.
• "Add trust badges and a returns summary." A content block, often available from an app without custom code.

Performance and conversion

Every addition to checkout adds something for the buyer to read, wait for or do. Before adding anything, ask whether it helps the buyer complete the order. Keep extensions light, avoid network calls during checkout where metafields can supply the data, and compare conversion rate before and after each change.

Decision checklist

• Which step and which target? Info, shipping and payment need Plus.
• Is it look (branding), UI (extension) or logic (Function)?
• Where must the data end up: order metafield, attribute, integration?
• Does it need to block checkout, and what's the error message?
• Does an app already do it?