--- title: Apps in checkout description: Learn how you can use extensions to customize many parts of the Shopify checkout experience. source_url: html: https://shopify.dev/docs/apps/build/checkout?itcat=partner_blog&itterm=shopify_best_checkout md: https://shopify.dev/docs/apps/build/checkout.md?itcat=partner_blog&itterm=shopify_best_checkout --- ExpandOn this page * [How it works](https://shopify.dev/docs/apps/build/checkout#how-it-works) * [Customization options](https://shopify.dev/docs/apps/build/checkout#customization-options) * [Getting started](https://shopify.dev/docs/apps/build/checkout#getting-started) * [Upgrade](https://shopify.dev/docs/apps/build/checkout#upgrade) * [Best practices](https://shopify.dev/docs/apps/build/checkout#best-practices) * [Product roadmap](https://shopify.dev/docs/apps/build/checkout#product-roadmap) # Apps in checkout Merchants use [Shopify checkout](https://help.shopify.com/manual/checkout-settings) to accept orders and receive payments wherever they sell online. To augment Shopify checkout with new functionality, build an app with extensions. *** ## How it works After a customer adds products to a cart, they use Shopify checkout to enter their customer, shipping, and payment information before placing the order. To extend checkout, apps can use extensions. For example, apps can use extensions to offer a customer free shipping or other discounts, depending on the contents of their cart. To install apps on their store, merchants can use the Shopify admin. There, they can can use the [checkout editor](https://shopify.dev/docs/apps/build/checkout/test-checkout-ui-extensions#test-the-extension-in-the-checkout-editor) to place a block for a [checkout UI extension](https://shopify.dev/docs/api/checkout-ui-extensions) in the checkout experience. ![Actions that a developer, customer, and merchant take in connection to Shopify checkout](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/what-is-checkout-BFffD-s0.png) *** ## Customization options There are various types of Shopify Extensions that you can use to customize checkout: * UI extensions * Functions * Web pixel extensions * Payments extensions All customization options are easy to install and upgrade-safe, enabling merchants to benefit from Shopify releases new products such as [Shop Pay](https://shopify.dev/docs/apps/build/checkout/test-checkout-ui-extensions#test-with-shop-pay), or features such as [One-page checkout](https://shopify.dev/docs/apps/build/checkout/test-checkout-ui-extensions#one-page-checkout). For a detailed breakdown of the technologies that can be used to customize checkout, and the ways that you can extend checkout, refer to the [options for customizing Shopify checkout](https://shopify.dev/docs/apps/build/checkout/technologies). Note Checkout apps and extensions have [design requirements](https://shopify.dev/docs/apps/launch/app-requirements-checklist#design-requirements-for-checkout-apps) that apply to custom apps as well as public apps. Be sure that your app meets [all requirements](https://shopify.dev/docs/apps/launch/app-requirements-checklist) for its functionality and distribution type. *** ## Getting started To learn how to customize and extend checkout, read the following tutorials. ### Checkout UI extensions tutorials [![](https://shopify.dev/images/icons/48/filesystem.png)![](https://shopify.dev/images/icons/48/filesystem-dark.png)](https://shopify.dev/docs/apps/build/checkout/product-offers/build-a-pre-purchase-offer) [Pre-purchase product offers](https://shopify.dev/docs/apps/build/checkout/product-offers/build-a-pre-purchase-offer) [Build a pre-purchase upsell offer that prompts the customer to add a product to their order.](https://shopify.dev/docs/apps/build/checkout/product-offers/build-a-pre-purchase-offer) [![](https://shopify.dev/images/icons/48/star.png)![](https://shopify.dev/images/icons/48/star-dark.png)](https://shopify.dev/docs/apps/build/checkout/product-offers/build-a-post-purchase-offer) [Post-purchase checkout extensions](https://shopify.dev/docs/apps/build/checkout/product-offers/build-a-post-purchase-offer) [Create a basic example of a post-purchase checkout extension.](https://shopify.dev/docs/apps/build/checkout/product-offers/build-a-post-purchase-offer) [![](https://shopify.dev/images/icons/48/marketplaces.png)![](https://shopify.dev/images/icons/48/marketplaces-dark.png)](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/add-survey) [Thank you and order status extensions](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/add-survey) [Build a survey that asks customers how they heard about the store after they made a purchase.](https://shopify.dev/docs/apps/build/checkout/thank-you-order-status/add-survey) [![](https://shopify.dev/images/icons/48/flag.png)![](https://shopify.dev/images/icons/48/flag-dark.png)](https://shopify.dev/docs/apps/build/checkout/fields-banners/add-banner) [Custom banners](https://shopify.dev/docs/apps/build/checkout/fields-banners/add-banner) [Learn how to add a custom banner to checkout.](https://shopify.dev/docs/apps/build/checkout/fields-banners/add-banner) [![](https://shopify.dev/images/icons/48/gear.png)![](https://shopify.dev/images/icons/48/gear-dark.png)](https://shopify.dev/docs/apps/build/checkout/fields-banners/add-field) [Custom fields](https://shopify.dev/docs/apps/build/checkout/fields-banners/add-field) [Learn how to add custom fields to checkout that customers can use to add delivery instructions to their order.](https://shopify.dev/docs/apps/build/checkout/fields-banners/add-field) [![](https://shopify.dev/images/icons/48/key.png)![](https://shopify.dev/images/icons/48/key-dark.png)](https://shopify.dev/docs/apps/build/checkout/cart-checkout-validation/create-client-side-validation) [Client-side validation](https://shopify.dev/docs/apps/build/checkout/cart-checkout-validation/create-client-side-validation) [Use a checkout UI extension to validate fields at checkout and block customer progress.](https://shopify.dev/docs/apps/build/checkout/cart-checkout-validation/create-client-side-validation) [![](https://shopify.dev/images/icons/48/tutorial.png)![](https://shopify.dev/images/icons/48/tutorial-dark.png)](https://shopify.dev/docs/apps/build/checkout/customize-header) [Header](https://shopify.dev/docs/apps/build/checkout/customize-header) [Use a checkout UI extension and the GraphQL Admin API's checkout branding types to customize the checkout header with custom images, including the back to cart link.](https://shopify.dev/docs/apps/build/checkout/customize-header) [![](https://shopify.dev/images/icons/48/growth.png)![](https://shopify.dev/images/icons/48/growth-dark.png)](https://shopify.dev/docs/apps/build/checkout/customize-footer) [Footer](https://shopify.dev/docs/apps/build/checkout/customize-footer) [Use a checkout UI extension and the GraphQL Admin API's checkout branding types to customize the checkout footer with store policies.](https://shopify.dev/docs/apps/build/checkout/customize-footer) [![](https://shopify.dev/images/icons/48/marketplaces.png)![](https://shopify.dev/images/icons/48/marketplaces-dark.png)](https://shopify.dev/docs/apps/build/checkout/delivery-shipping/address-autocomplete/build-autocomplete) [Address autocomplete](https://shopify.dev/docs/apps/build/checkout/delivery-shipping/address-autocomplete/build-autocomplete) [Build an extension to customize the address autocomplete provider for the delivery and billing address forms in checkout.](https://shopify.dev/docs/apps/build/checkout/delivery-shipping/address-autocomplete/build-autocomplete) ### Shopify Functions tutorials [![](https://shopify.dev/images/icons/48/heart.png)![](https://shopify.dev/images/icons/48/heart-dark.png)](https://shopify.dev/docs/apps/build/discounts/build-discount-function) [Build a discount function](https://shopify.dev/docs/apps/build/discounts/build-discount-function) [Use Shopify Functions to create a new discount type for users.](https://shopify.dev/docs/apps/build/discounts/build-discount-function) [![](https://shopify.dev/images/icons/48/coin.png)![](https://shopify.dev/images/icons/48/coin-dark.png)](https://shopify.dev/docs/apps/build/checkout/payments/create-payments-function) [Create a payments function](https://shopify.dev/docs/apps/build/checkout/payments/create-payments-function) [Use Shopify Functions to hide a payment option offered to customers at checkout.](https://shopify.dev/docs/apps/build/checkout/payments/create-payments-function) [![](https://shopify.dev/images/icons/48/globe.png)![](https://shopify.dev/images/icons/48/globe-dark.png)](https://shopify.dev/docs/apps/build/checkout/delivery-shipping/delivery-options/build-function) [Build a delivery options function](https://shopify.dev/docs/apps/build/checkout/delivery-shipping/delivery-options/build-function) [Use Shopify Functions to rename a delivery option offered to customers at checkout.](https://shopify.dev/docs/apps/build/checkout/delivery-shipping/delivery-options/build-function) [![](https://shopify.dev/images/icons/48/custom-storefronts.png)![](https://shopify.dev/images/icons/48/custom-storefronts-dark.png)](https://shopify.dev/docs/apps/build/checkout/cart-checkout-validation/create-server-side-validation-function) [Create a server-side validation function](https://shopify.dev/docs/apps/build/checkout/cart-checkout-validation/create-server-side-validation-function) [Use Shopify Functions to block progress on a checkout when the cart line quantities exceed a limit.](https://shopify.dev/docs/apps/build/checkout/cart-checkout-validation/create-server-side-validation-function) [![](https://shopify.dev/images/icons/48/growth.png)![](https://shopify.dev/images/icons/48/growth-dark.png)](https://shopify.dev/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules/build-location-rule-function) [Build a location rule function](https://shopify.dev/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules/build-location-rule-function) [Use Shopify Functions to choose a different order location during checkout.](https://shopify.dev/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules/build-location-rule-function) [![](https://shopify.dev/images/icons/48/hearts.png)![](https://shopify.dev/images/icons/48/hearts-dark.png)](https://shopify.dev/docs/apps/build/product-merchandising/bundles/add-customized-bundle-function) [Add a customized bundle function](https://shopify.dev/docs/apps/build/product-merchandising/bundles/add-customized-bundle-function) [Use Shopify Functions to group products together and sell them as a single unit.](https://shopify.dev/docs/apps/build/product-merchandising/bundles/add-customized-bundle-function) [![](https://shopify.dev/images/icons/48/tutorial.png)![](https://shopify.dev/images/icons/48/tutorial-dark.png)](https://shopify.dev/docs/apps/build/orders-fulfillment/order-routing-apps/build-fulfillment-constraints-function) [Build a fulfillment constraints function](https://shopify.dev/docs/apps/build/orders-fulfillment/order-routing-apps/build-fulfillment-constraints-function) [Use Shopify Functions to customize fulfillment and delivery strategies.](https://shopify.dev/docs/apps/build/orders-fulfillment/order-routing-apps/build-fulfillment-constraints-function) [![](https://shopify.dev/images/icons/48/build.png)![](https://shopify.dev/images/icons/48/build-dark.png)](https://shopify.dev/docs/apps/build/orders-fulfillment/order-routing-apps/build-local-pickup-options-function) [Build a local pickup options function](https://shopify.dev/docs/apps/build/orders-fulfillment/order-routing-apps/build-local-pickup-options-function) [Use Shopify Functions to generate local pickup delivery options at checkout.](https://shopify.dev/docs/apps/build/orders-fulfillment/order-routing-apps/build-local-pickup-options-function) [![](https://shopify.dev/images/icons/48/gear.png)![](https://shopify.dev/images/icons/48/gear-dark.png)](https://shopify.dev/docs/apps/build/checkout/delivery-shipping/delivery-methods/create-local-pickup-charges-function) [Create a local pickup charges function](https://shopify.dev/docs/apps/build/checkout/delivery-shipping/delivery-methods/create-local-pickup-charges-function) [Use Shopify Functions to create local pickup charges at checkout.](https://shopify.dev/docs/apps/build/checkout/delivery-shipping/delivery-methods/create-local-pickup-charges-function) [![](https://shopify.dev/images/icons/48/gear.png)![](https://shopify.dev/images/icons/48/gear-dark.png)](https://shopify.dev/docs/apps/build/checkout/delivery-shipping/delivery-methods/generate-pickup-points) [Generate a pickup points function](https://shopify.dev/docs/apps/build/checkout/delivery-shipping/delivery-methods/generate-pickup-points) [Use Shopify Functions to generate pickup point delivery options at checkout.](https://shopify.dev/docs/apps/build/checkout/delivery-shipping/delivery-methods/generate-pickup-points) *** ## Upgrade Deprecated `checkout.liquid` is now unsupported for the Information, Shipping, and Payment checkout steps. `checkout.liquid`, additional scripts, and script tags are deprecated for the **Thank you** and **Order status** pages and will be sunset on August 28, 2025. Stores that currently use `checkout.liquid` for the **Thank you** and **Order status** pages need to [upgrade to Shopify Extensions in Checkout](https://www.shopify.com/checkout#advanced-customizations) before the deadline. [Shopify Scripts](https://shopify.dev/docs/api/liquid/objects#script) will continue to work alongside Shopify Extensions in checkout until June 30, 2026. A report identifying your current checkout customizations is available in the Shopify admin. The report provides high-level guidance to map customizations to Shopify Extensions in Checkout. Use this report to simplify your review of your existing customizations and to help you upgrade to Shopify Extensions in Checkout faster. [Learn more](https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-upgrade). To upgrade a `checkout.liquid` customization to Shopify Extensions in Checkout, take one or more of the following actions: 1. Use a public app that's built using extensions. We're adding new checkout apps to the Shopify App Store on a regular basis. If there currently isn't a suitable public app for your customization, then consider simplifying your checkout temporarily and adding new apps to your store as they become available. 2. Build a custom app using extensions, or [hire a service partner](https://www.shopify.com/plus/partners/service?type=service\&services%5B%5D=141) to build one for you. In some cases, after you've upgraded you can [revert to `checkout.liquid`](https://help.shopify.com/manual/checkout-settings/checkout-extensibility/checkout-upgrade#revert-to-checkout-liquid) until its sunset dates. If you're upgrading a store to Shopify Extensions in Checkout, we recommend planning your in-checkout, **Thank you** page, and **Order status** page upgrades together, when possible, for the following benefits: * Avoid maintaining multiple tech stacks, like UI extensions and `checkout.liquid`. * Apply styling once to the entire experience. * Manage one sunset date for `checkout.liquid` rather than one date for pre-purchase pages and another for **Thank you** and **Order status** pages. If this isn't possible, then we recommend prioritizing the upgrade for in-checkout pages first and upgrading after-purchase pages after that. *** ## Best practices To optimize your app development experience, Shopify has established a set of best practices that you can refer to when developing an app that extends checkout. Tip We also recommend getting familiar with Polaris [accessibility](https://polaris.shopify.com/foundations/accessibility) and [content](https://polaris.shopify.com/content/merchant-to-customer) guidelines. [![](https://shopify.dev/images/icons/48/blocks.png)![](https://shopify.dev/images/icons/48/blocks-dark.png)](https://shopify.dev/docs/apps/build/checkout/create-multi-page-extensions) [Create multi-page extensions](https://shopify.dev/docs/apps/build/checkout/create-multi-page-extensions) [Learn more about building extensions that can render on any checkout page.](https://shopify.dev/docs/apps/build/checkout/create-multi-page-extensions) [![](https://shopify.dev/images/icons/48/heart.png)![](https://shopify.dev/images/icons/48/heart-dark.png)](https://shopify.dev/docs/apps/build/checkout/ux-for-checkout) [UX for checkout](https://shopify.dev/docs/apps/build/checkout/ux-for-checkout) [Learn how to improve the quality of checkout experiences by following our UX guidelines for checkout.](https://shopify.dev/docs/apps/build/checkout/ux-for-checkout) [![](https://shopify.dev/images/icons/48/key.png)![](https://shopify.dev/images/icons/48/key-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#network-access) [Network requests from extensions](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#network-access) [Learn about Cross-Origin Resource Sharing (CORS) and other security considerations when making network requests to your own server.](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#network-access) [![](https://shopify.dev/images/icons/48/bfsgem.png)![](https://shopify.dev/images/icons/48/bfsgem-dark.png)](https://shopify.dev/docs/apps/design-guidelines/) [App Design Guidelines](https://shopify.dev/docs/apps/design-guidelines/) [Get practical guidance on how to design a user interface for the Shopify admin.](https://shopify.dev/docs/apps/design-guidelines/) *** ## Product roadmap Some checkout customization features are in development and will be released later this year. The following are the features on our roadmap and our estimated launch dates: Note This roadmap is being shared for informational purposes and is subject to change. Bug fixes and improvements will be added as we hear from the community. Share your feedback or request new features by creating a new issue in the [Shopify developer community forum](https://community.shopify.dev/). ### UI extensions Stores that subscribe to the Shopify Plus plan can add UI extensions to their **Checkout**, **Thank you** and **Order status** pages. Stores on Basic, Shopify, and Advanced plans can only add UI extensions to their **Thank you** and **Order status** pages. Merchants can install apps from the Shopify App Store or build custom apps that contain UI extensions. We'll continue adding API capabilities to help you access the right functionality in extensions. We'll also continue adding UI components that offer performant patterns on our design best practices. We release new components and APIs into the [unstable](https://shopify.dev/docs/api/usage/versioning#unstable-api-versions) API version first, and promote to the next stable release based on Shopify's [API version release schedule](https://shopify.dev/docs/api/usage/versioning#release-schedule). | Feature | Target launch date | | - | - | | Checkout and accounts editor setting to [display the discount code field by default](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations/checkout-style#discount-field) on mobile devices | June 2024 (shipped) | | Support for [conditional component rendering](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper#examples) on mobile checkouts | June 2024 (shipped) | | Support for [one-time use addresses](https://shopify.dev/changelog/storefront-api-cart-now-supports-one-time-use-delivery-addresses) in Storefront Cart API and UI Extension API | July 2024 (shipped) | | Support for UI extensions in [draft order invoice checkouts](https://shopify.dev/changelog/checkout-ui-extensions-new-required-cart-instructions-api-when-updating-to-2024-07-api-version) | July 2024 (shipped) | | Default a buyer to a merchant-provided address, with an option for the buyer to enter new address | August 2024 (early access) | | Support for [conditionally hiding the input field for 1st-party gift cards](https://shopify.dev/changelog/conditionally-disable-gift-cards-in-checkout-using-custom-logic-with-the-payment-customization-api) | November 2024 (shipped) | | Support for [styling order summary line items with the Branding API](https://shopify.dev/changelog/customize-line-items-in-checkout-and-customer-accounts-order-summary-using-new-checkout-branding-api-settings) | December 2024 (shipped) | | Support for integrating 3rd-party [chat applications](https://shopify.dev/docs/apps/build/checkout/chat) into checkout | December 2024 (shipped) | | Support for [reading app-owned metafields](https://shopify.dev/changelog/support-added-for-app-owned-metafields-in-checkout-ui-extension-api) in checkout UI extensions and Customer Account UI extensions | April 2025 (shipped) | | Input query API for customizing the data available to UI extensions | Q3 2025 | ### Shopify Functions We'll continue to add new Shopify Functions APIs to further customize checkout business logic. | Milestone | Target | | - | - | | Introduced a new [Discount API](https://shopify.dev/docs/api/functions/reference/discount) that supports any combination of product, order, and shipping savings from a single function extension | April 2025 (shipped) | | Support for cart metafields on function input queries | July 2025 | | Optionally reject discount codes and return custom messages when discounts shouldn't be applied [(Discount API)](https://shopify.dev/docs/api/functions/latest/discount) | Q4 2025 | | Support capturing and persisting custom data [(Discount API)](https://shopify.dev/docs/api/functions/latest/discount) | Q4 2025 | | Support complex conditions for "Buy X Get Y" discounts [(Discount API)](https://shopify.dev/docs/api/functions/latest/discount) | Q1 2026 | | Changes to the [Discount API](https://shopify.dev/docs/api/functions/reference/discount) to stack multiple discounts on the same product line item | Q1 2026 | ### Pixels We'll continue to add new custom pixel and app pixel events and features. | Milestone | Target | | - | - | | Added new standard events: tracking errors during checkout | October 2024 (shipped) | | Support for extending data fields on standard events | Q1 2025 | *** * [How it works](https://shopify.dev/docs/apps/build/checkout#how-it-works) * [Customization options](https://shopify.dev/docs/apps/build/checkout#customization-options) * [Getting started](https://shopify.dev/docs/apps/build/checkout#getting-started) * [Upgrade](https://shopify.dev/docs/apps/build/checkout#upgrade) * [Best practices](https://shopify.dev/docs/apps/build/checkout#best-practices) * [Product roadmap](https://shopify.dev/docs/apps/build/checkout#product-roadmap)