Technologies for customizing Shopify checkout

This guide describes the various technologies that you can use to customize Shopify checkout. The primary technology for adding custom UI is checkout UI extensions, which are built with Polaris — Shopify's unified system for building app interfaces. Polaris provides targets that define where your extension appears in the checkout flow, target APIs that give your extension access to checkout data and functionality, and web components that render the UI.

Anchor to TechnologiesTechnologies

You can customize Shopify checkout using the following technologies:

Technology	Customization type	Availability
Checkout UI extensions	Add custom UI or content to the checkout process and Order status page	Shopify Plus. Thank you and Order status extensions are available to all plans except Shopify Starter. Market overrides are available to Advanced.
Checkout UI extensions: post-purchase	Add new content to the post-purchase page	All plans except Shopify Starter. Currently in beta. Can be used without restrictions in a dev store. To use post-purchase extensions on a live store, you need to request access.
GraphQL Admin API	Customize the look and feel of checkout	Shopify Plus
Shopify Functions	Extend or replace key parts of Shopify's backend with custom logic	All plans except Shopify Starter. Some Function APIs are only available in feature preview. Merchants that have checkout.liquid customizations need to upgrade to Shopify Extensions in Checkout to use Function APIs.
Web pixel extensions	Track customer behavior	All plans except Shopify Starter.

The following diagram provides a decision tree for choosing a technology:

A decision diagram for choosing a specific checkout technology

Anchor to Use casesUse cases

There are a variety of ways that you can customize Shopify checkout. The following table describes some common use cases that you can build:

Technology	Customization type	Use cases
Checkout UI extensions	Add custom UI or content to the checkout process and Order status page	Show a product offer before a customer completes checkout. Capture additional input from customers. Build a custom banner that displays in checkout. Capture a survey of the buying experience, or reviews when orders are fulfilled. Provide a referral code to new customers. Add a field validation at checkout that blocks customers from progressing in the checkout if they input invalid data.
Checkout UI extensions: post-purchase	Add new content to the post-purchase page	Show a product offer after customers have checked out, but before they arrive at the order confirmation page. Capture additional information after customers have checked out, but before they arrive at the order confirmation page.
GraphQL Admin API	Customize the look and feel of checkout	Apply branding changes such as changing the colors and corner radius settings on checkout form fields.
Shopify Functions	Extend or replace key parts of Shopify's backend with custom logic	Create a new type of discount that's offered in the cart and at checkout. Rename, reorder, and sort the payment options available to customers during checkout. Rename, reorder, and sort the delivery options available to customers during checkout. Enforce an order maximum for customers with insufficient order history and prevent them from proceeding through checkout. Use location rules to rank the possible locations for a line item during checkout. Use fulfillment constraints to customize fulfillment and delivery strategies during the checkout and fulfillment process. Generate options for the pickup points that are available to customers.
Web pixel extensions	Track customer behavior	Collect customer behavioral data to measure and optimize marketing campaign performance as well as your online store's conversion funnel.

Anchor to Market overridesMarket overrides

Merchants on Advanced or Plus who use markets can tailor their checkout and customer accounts experience for regional and company location markets.

In the checkout and accounts editor, merchants can create market-specific overrides in either their published or draft configurations. Overrides inherit from their parent market override or from the store's default experience when no parent override exists. A market override can include changes to branding and settings, and can add, reorder, or remove extensions.

If the buyer's resolved markets change while they're in checkout or customer accounts (for example, due to a delivery address change), updated settings are dynamically reloaded. Extensions might also be added or removed as a result. If an extension is moved to a different target for a market, it's treated as a new activation and will be unmounted and remounted.

To ensure the best merchant and buyer experience:

Prefer native market overrides in the editor over re-implementing your custom market contextualization for market types already supported by Shopify.
Don't rely on useLocalizationMarket() for market-specific conditions. Market definitions are merchant-defined and this API returns only the most precise regional market. Use delivery address or company location information for regional/B2B logic.
Use local storage to persist state across extension activations and target changes.

Anchor to Next stepsNext steps

Get started building for checkout to scaffold your first checkout UI extension.
Explore the checkout UI extensions reference for available targets, target APIs, and web components.

Was this page helpful?