Merchants use [Shopify checkout](https://help.shopify.com/manual/checkout-settings) to accept orders and receive payments wherever they sell online. You can augment Shopify checkout with new functionality by building an app.

## 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.

Developers can create apps that extend Shopify checkout to include functionality that isn't provided natively. For example, you can create an app that offers a customer free shipping or other discounts depending on what's in their cart.

Merchants install these apps on their store in the Shopify admin. In the Shopify admin, merchants can use the [checkout editor](/docs/apps/build/checkout/test-checkout-ui-extensions#test-the-extension-in-the-checkout-editor) to place a [checkout UI extension](/docs/api/checkout-ui-extensions) in the checkout experience.

![Actions that a developer, customer, and merchant take in connection to Shopify checkout](/assets/apps/checkout/what-is-checkout.png)

## Customization options

You can customize Shopify checkout using multiple technologies. All customization options are easy to install and upgrade-safe, which enables merchants to continue getting platform benefits when Shopify releases new products such as [Shop Pay](/docs/apps/build/checkout/test-checkout-ui-extensions#test-with-shop-pay), or features such as [One-page checkout](/docs/apps/build/checkout/test-checkout-ui-extensions#one-page-checkout).

For a detailed breakdown of the available technologies for customizing checkout, and ways that you can extend checkout, refer to the [options for customizing Shopify checkout](/docs/apps/build/checkout/technologies).

## Getting started

Learn how to customize and extend checkout by following one of our use case tutorials.

### Checkout UI extensions tutorials

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/checkout/product-offers/build-a-pre-purchase-offer" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/filesystem"
     data-alt-src="/assets/resource-cards/filesystem-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Pre-purchase product offers
    </h3>
    <p class="resource-card__description">Build a pre-purchase upsell offer that prompts the customer to add a product to their order. </p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/product-offers/build-a-post-purchase-offer" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/star"
     data-alt-src="/assets/resource-cards/star-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Post-purchase checkout extensions
    </h3>
    <p class="resource-card__description">Create a basic example of a post-purchase checkout extension. </p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/thank-you-order-status/add-survey" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/marketplaces"
     data-alt-src="/assets/resource-cards/marketplaces-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Thank you and order status extensions
    </h3>
    <p class="resource-card__description">Build a survey that asks customers how they heard about the store after they made a purchase. </p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/fields-banners/add-banner" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/quickstart"
     data-alt-src="/assets/resource-cards/quickstart-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Custom banners
    </h3>
    <p class="resource-card__description">Learn how to add a custom banner to checkout. </p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/fields-banners/add-field" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/gear"
     data-alt-src="/assets/resource-cards/gear-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Custom fields
    </h3>
    <p class="resource-card__description">Learn how to add custom fields to checkout that customers can use to add delivery instructions to their order. </p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/cart-checkout-validation/create-client-side-validation" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/utility"
     data-alt-src="/assets/resource-cards/utility-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Client-side validation
    </h3>
    <p class="resource-card__description">Use a checkout UI extension to validate fields at checkout and block customer progress.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/customize-header" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/tutorial"
     data-alt-src="/assets/resource-cards/tutorial-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Header
    </h3>
    <p class="resource-card__description">Use a checkout UI extension and the GraphQL Admin API&#39;s checkout branding types to customize the checkout header with custom images, including the back to cart link.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/customize-footer" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/growth"
     data-alt-src="/assets/resource-cards/growth-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Footer
    </h3>
    <p class="resource-card__description">Use a checkout UI extension and the GraphQL Admin API&#39;s checkout branding types to customize the checkout footer with store policies.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/delivery-shipping/address-autocomplete/build-autocomplete" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/marketplaces"
     data-alt-src="/assets/resource-cards/marketplaces-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Address autocomplete
    </h3>
    <p class="resource-card__description">Build an extension to customize the address autocomplete provider for the delivery and billing address forms in checkout.</p>
  </a>
</div>

</div>



### Shopify Functions tutorials

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/discounts/build-discount-function" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/heart"
     data-alt-src="/assets/resource-cards/heart-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Build a discount function
    </h3>
    <p class="resource-card__description">Use Shopify Functions to create a new discount type for users.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/checkout/payments/create-payments-function" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/coin"
     data-alt-src="/assets/resource-cards/coin-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Create a payments function
    </h3>
    <p class="resource-card__description">Use Shopify Functions to hide a payment option offered to customers at checkout.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/checkout/delivery-shipping/delivery-options/build-function" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/globe"
     data-alt-src="/assets/resource-cards/globe-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Build a delivery options function
    </h3>
    <p class="resource-card__description">Use Shopify Functions to rename a delivery option offered to customers at checkout.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/checkout/cart-checkout-validation/create-server-side-validation" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/storefront"
     data-alt-src="/assets/resource-cards/storefront-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Create server-side validation
    </h3>
    <p class="resource-card__description">Use Shopify Functions to block progress on a checkout when the cart line quantities exceed a limit.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules/build-location-rule-function" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/growth"
     data-alt-src="/assets/resource-cards/growth-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Build a location rule function
    </h3>
    <p class="resource-card__description">Use Shopify Functions to choose a different order location during checkout.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/product-merchandising/bundles/add-customized-bundle" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/hearts"
     data-alt-src="/assets/resource-cards/hearts-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Add a customized bundle
    </h3>
    <p class="resource-card__description">Use Shopify Functions to group products together and sell them as a single unit.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/orders-fulfillment/order-routing-apps/build-fulfillment-constraints" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/tutorial"
     data-alt-src="/assets/resource-cards/tutorial-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Build fulfillment constraints
    </h3>
    <p class="resource-card__description">Use Shopify Functions to customize fulfillment and delivery strategies.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/orders-fulfillment/order-routing-apps/build-local-pickup-options" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/build"
     data-alt-src="/assets/resource-cards/build-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Build local pickup options
    </h3>
    <p class="resource-card__description">Use Shopify Functions to generate local pickup delivery options at checkout.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/checkout/delivery-shipping/delivery-methods/generate-pickup-points" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/gear"
     data-alt-src="/assets/resource-cards/gear-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Generate pickup points
    </h3>
    <p class="resource-card__description">Use Shopify Functions to generate pickup point delivery options at checkout.</p>
  </a>
</div>
</div>



## 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 Checkout Extensibility](https://www.shopify.com/plus/upgrading-to-checkout-extensibility) before the deadline. [Shopify Scripts](/docs/api/liquid/objects#script) will continue to work alongside Checkout Extensibility until August 28, 2025.




A report identifying your current checkout customizations is available in the Shopify admin. The report provides high-level guidance to map customizations to Checkout Extensibility. Use this report to simplify your review of your existing customizations and to help you upgrade to Checkout Extensibility faster. [Learn more](https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-upgrade).

To upgrade a `checkout.liquid` customization to Checkout Extensibility, 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.
1. 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 Checkout Extensibility, 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.

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/checkout/create-multi-page-extensions" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/blocks"
     data-alt-src="/assets/resource-cards/blocks-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Create multi-page extensions
    </h3>
    <p class="resource-card__description">Learn more about building extensions that can render on any checkout page.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/ux-for-checkout" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/heart"
     data-alt-src="/assets/resource-cards/heart-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      UX for checkout
    </h3>
    <p class="resource-card__description">Learn how to improve the quality of checkout experiences by following our UX guidelines for checkout.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/api/checkout-ui-extensions/latest/configuration#network-access" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/utility"
     data-alt-src="/assets/resource-cards/utility-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Network requests from extensions
    </h3>
    <p class="resource-card__description">Learn about Cross-Origin Resource Sharing (CORS) and other security considerations when making network requests to your own server.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/design-guidelines/" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/bfsgem"
     data-alt-src="/assets/resource-cards/bfsgem-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      App Design Guidelines
    </h3>
    <p class="resource-card__description">Get practical guidance on how to design a user interface for the Shopify admin.</p>
  </a>
</div>

</div>


## 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 during the developer preview. Share your feedback or request new features by creating a new issue in our [GitHub repository](https://github.com/Shopify/ui-extensions/issues).

### 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.

| Milestone | Target |
|---|---|
| Checkout UI extensions available on all eligible Plus stores | January 2023 (shipped) |
| General availability of [extensions](/docs/apps/build/checkout/thank-you-order-status) on the **Thank you** and **Order status** page (Plus plan only) | November 2023 (shipped) |
| General availability of [extensions](/docs/apps/build/checkout/thank-you-order-status) on the **Thank you** and **Order status** page (all plans above Starter) | May 2024 (shipped) |

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](/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](/docs/api/usage/versioning#release-schedule).

| Feature | Target launch date |
|---|---|
| Support for reading and writing [discount codes](/docs/api/checkout-ui-extensions/unstable/apis/standardapi#properties-propertydetail-discountcodes) | January 2023 (shipped) |
| New UI components: [Tooltip](/docs/api/checkout-ui-extensions/unstable/components/overlays/tooltip), [Pressable](/docs/api/checkout-ui-extensions/unstable/components/actions/pressable) | January 2023 (shipped) |
| Support for reading and writing [gift cards](/docs/api/checkout-ui-extensions/unstable/apis/standardapi#properties-propertydetail-appliedgiftcards) | February 2023 (shipped) |
| New UI components: [Popover](/docs/api/checkout-ui-extensions/unstable/components/overlays/popover), [Modal](/docs/api/checkout-ui-extensions/unstable/components/overlays/modal) | February 2023 (shipped) |
| Heading styles, button styles and corner radius controls through the [Branding API](/docs/api/admin-graphql/unstable/mutations/checkoutBrandingUpsert) | February 2023 (shipped) |
| [Session token API](/docs/api/checkout-ui-extensions/unstable/apis/standardapi#properties-propertydetail-sessiontoken) to enable authenticated network calls | February 2023 (shipped) |
| New API that allows checkout UI extensions to directly [query the Storefront API](/docs/api/checkout-ui-extensions/unstable/apis/standardapi#properties-propertydetail-query) | February 2023 (shipped) |
| New UI components: [Disclosure](/docs/api/checkout-ui-extensions/unstable/components/interactive/disclosure), [DatePicker](/docs/api/checkout-ui-extensions/unstable/components/forms/datepicker) | April 2023 (shipped) |
| Merchant-uploaded [custom fonts](/docs/apps/build/checkout/styling/customize-typography) through the GraphQL Admin API | April 2023 (shipped) |
| Support for adding [checkout field validation errors](/docs/api/checkout-ui-extensions/unstable/apis/buyer-journey) from UI extensions | April 2023 (shipped) |
| New API for [SellingPlan on line items](/docs/api/checkout-ui-extensions/unstable/apis/cart-lines) (read/write) | May 2023 (shipped) |
| New API for reading [presented](/docs/api/checkout-ui-extensions/unstable/apis/payments#standardapi-propertydetail-availablepaymentoptions) and [selected](/docs/api/checkout-ui-extensions/unstable/apis/payments#standardapi-propertydetail-selectedpaymentoptions) payment options | May 2023 (shipped) |
| New API for reading [presented and selected delivery options](/docs/api/checkout-ui-extensions/unstable/apis/delivery#standardapi-propertydetail-deliverygroups) | June 2023 (shipped) |
| New UI components: [DateField](/docs/api/checkout-ui-extensions/unstable/components/forms/datefield) | June 2023 (shipped) |
| Developer preview of the **Order status** page in the checkout editor | June 2023 (shipped) |
| New extension targets for [enhancing delivery options](/docs/api/checkout-ui-extensions/latest/extension-targets-overview#supported-locations) | June 2023 (shipped) |
| New API for [cart metafields](/docs/api/checkout-ui-extensions/unstable/apis/metafields#standardapi-propertydetail-appmetafields) (read/write) | July 2023 (shipped) |
| New API for writing updates to the [shipping address](/docs/api/checkout-ui-extensions/latest/apis/checkoutapi#properties-propertydetail-applyshippingaddresschange) | July 2023 (shipped) |
| New API to read the [customer billing address](/docs/api/checkout-ui-extensions/unstable/apis/standardapi#properties-propertydetail-billingaddress) | August 2023 (shipped) |
| New API for [reading price breakdown on checkout total](/docs/api/checkout-ui-extensions/unstable/apis/cost) | August 2023 (shipped) |
| New API to read a [unique and stable session token](/docs/api/checkout-ui-extensions/unstable/apis/checkout-token) for the current buyer checkout session | September 2023 (shipped) |
| New API for [customized SMS consent capture](/docs/api/checkout-ui-extensions/unstable/configuration#collect-buyer-consent) | September 2023 (shipped)|
| New extension [targets for extending payment options](/docs/api/checkout-ui-extensions/unstable/targets/payments/purchase-checkout-payment-method-list-render-before) | September 2023 (shipped) |
| New UI component: [`Map`](/docs/api/checkout-ui-extensions/unstable/components/interactive/map) | September 2023 (shipped) |
| Advanced [color styling through the GraphQL Admin API](/docs/apps/build/checkout/styling/update-color-settings) | September 2023 (shipped) |
| New extension targets for [header](/docs/api/checkout-ui-extensions/unstable/targets/header/purchase-checkout-header-render-after) and [footer](/docs/api/checkout-ui-extensions/unstable/targets/footer/purchase-checkout-footer-render-after) customization | November 2023 (shipped) |
| New API to [read and write cookie tracking consent](/docs/api/checkout-ui-extensions/unstable/apis/customer-privacy) | January 2024 (shipped) |
| Advanced [section styling](/changelog/checkout-branding-supports-container-styles), such as borders and spacing, through the Branding API  | January 2024 (shipped) |
| [Customizations Report](https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-upgrade) to identify existing checkout.liquid customizations with upgrade guidance | January 2024 (shipped) |
| [Header and footer customizations](/changelog/checkout-supports-header-and-footer-customizations) through the Branding API | January 2024 (shipped) |
| New API to [read checkout steps](/docs/api/checkout-ui-extensions/unstable/apis/buyer-journey) to enable buiding a custom breadcrumb| March 2024 (shipped) |
| New UI components for customer privacy consent collection [`Sheet`](/docs/api/checkout-ui-extensions/unstable/components/overlays/sheet) | March 2024 (shipped) |
| [Tailored upgrade guidance](https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-upgrade) for existing checkout.liquid customizations | March 2024 (shipped) |
| Support for Plus merchants currently using products to represent [additional fees or charges in checkout](https://shopify.dev/changelog/support-for-plus-merchants-currently-using-products-to-represent-additional-fees-or-charges-in-checkout) | April 2024 (shipped) |
| Update to [customizations report](https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-upgrade) to include additional scripts analysis and app recommendations | April 2024 (shipped) |
| Support for using a [custom address auto-complete provider](/docs/api/checkout-ui-extensions/2024-04/targets/address/purchase-address-autocomplete-suggest) | May 2024 (shipped) |
| New UI component: [`Switch`](/docs/api/checkout-ui-extensions/unstable/components/forms/switch) | May 2024 (shipped) |
| New API to [read delivery option metafields](/docs/api/checkout-ui-extensions/unstable/apis/delivery#pickuplocationitemapi) associated with a local pickup location | May 2024 (shipped) |
| Setting in the checkout and accounts editor 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) |
| Pre-filling the checkout state from inputs provided through the Cart API | June 2024 (shipped) |
| Support for [conditional component rendering](/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper#examples) on mobile checkouts | June 2024 (shipped) |
| Header and footer alignment, position and visibility controls in the checkout and accounts editor | June 2024 (shipped) |
| Update the [customizations report](https://admin.shopify.com/settings/checkout) to include apps that use ScriptTag API | July 2024 (shipped) |
| Support for [one-time use addresses](/changelog/storefront-api-cart-now-supports-one-time-use-delivery-addresses) in Storefront Cart API and UI Extension API | July 2024 (shipped) |
| New UI component: [QRCode](/docs/api/checkout-ui-extensions/unstable/components/other/qrcode) | July 2024 (shipped) |
| Support for UI extensions in [draft order invoice checkouts](/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 styling order summary line items with the Branding API | November 2024 |
| Support for integrating 3rd-party chat applications into checkout | November 2024 |
| Support for rendering address fields, such as city and neighborhood, using dropdown lists | Q4 2024 |
| Support for conditionally hiding the input field for 1st-party gift cards | Q4 2024 |
| Input query API for customizing the data available to UI extensions | Q4 2024 |
| New API to [write to the customer billing address](https://github.com/Shopify/ui-extensions/issues/1529) | Deferred |

### Shopify Functions

We'll continue to add new Shopify Function APIs to further customize checkout business logic.

| Milestone | Target |
|---|---|
| General availability of [Product Discount API](/docs/api/functions/reference/product-discounts) and [Order Discount API](/docs/api/functions/reference/order-discounts) | December 2022 (shipped) |
| General availability of [Payment Customization API](/docs/api/functions/reference/payment-customization) and [Delivery Customization API](/docs/api/functions/reference/delivery-customization) | February 2023 (shipped) |
| General availability of [Cart Transform Function API](/docs/api/functions/reference/cart-transform) | July 2023 (shipped) |
| General availability of [Order Routing Location Rule API](/docs/api/functions/reference/order-routing-location-rule) | July 2023 (shipped) |
| General availability of [Fulfillment Constraints API](/docs/api/functions/reference/fulfillment-constraints) | July 2023 (shipped) |
| General availability of [Cart and Checkout Validation API](/docs/api/functions/reference/cart-checkout-validation) for custom apps | July 2023 (shipped) |
| Developer preview of [Function API to customize delivery options for local pickup](/docs/api/functions/reference/local-pickup-delivery-option-generator/graphql) | September 2023 (shipped) |
| Developer preview of [Cart Transform Function API](/docs/api/functions/reference/cart-transform): per component pricing and update operation | October 2023 (shipped) |
| General availability of [Cart and Checkout Validation API](/docs/api/functions/reference/cart-checkout-validation) for public apps | January 2024 (shipped) |
| General availability of [Cart Transform Function API](/docs/api/functions/reference/cart-transform): per component pricing and update operation | January 2024 (shipped) |
| General availability of [Shipping Discount API](/docs/api/functions/reference/shipping-discounts) | January 2024 (shipped)|
| Addition to the [Product Discount API](/docs/api/functions/reference/product-discounts) to return all applicable discounts | January 2024 (shipped) |
| Developer preview of [Function API for integrating a 3rd-party pickup point network](/docs/api/functions/reference/pickup-point-delivery-option-generator) | February 2024 (shipped) |
| General availability of [Cart Transform Function API](/docs/api/functions/reference/cart-transform): per component pricing and update operation | Q1 2024 (shipped) |
| Addition to the [Product Discount API](/docs/api/functions/reference/product-discounts) to return all applicable discounts | Q1 2024 (shipped)|
| Developer Preview of Discounts Allocator Function API to customize discounts allocation logic | Q1 2024 (shipped) |
| Addition to the [Product Discount API](/docs/api/functions/reference/product-discounts) to [target cart line items](/docs/api/functions/reference/product-discounts/graphql/common-objects/target?api%5Bversion%5D=2024-07) | Q3 2024 (shipped) |
| Support for cart metafields on function input queries | Q4 2024 |
| Changes to the [Discount APIs](/docs/api/functions/reference/product-discounts) to stack multiple discounts on the same product line item | Q2 2025 |

### Web pixel app extensions

We'll continue to add new custom pixel and app pixel events and features.

| Milestone | Target |
|---|---|
| Add `attributes` to [Checkout](/docs/api/web-pixels-api/standard-events#checkout) object | March 2023 (shipped) |
| Add `firstName` and `lastName` to [Customer](/docs/api/web-pixels-api/standard-events#customer) object | March 2023 (shipped) |
| Add `productVariants` to [searchResult](/docs/api/web-pixels-api/standard-events#searchresult) object | March 2023 (shipped) |
| Add `address1`, `address2` and `zip` to [mailingAddress](/docs/api/web-pixels-api/standard-events#mailingaddress) object | April 2023 (shipped) |
| Add `type` to [Product](/docs/api/web-pixels-api/standard-events#product) object| April 2023 (shipped) |
| New [standard event](/docs/api/web-pixels-api/standard-events#standard-events): `checkout_shipping_info_submitted` | April 2023 (shipped) |
| New [standard event](/docs/api/web-pixels-api/standard-events#standard-events): `checkout_address_info_submitted`| April 2023 (shipped) |
| New [standard event](/docs/api/web-pixels-api/standard-events#standard-events): `checkout_contact_info_submitted`| April 2023 (shipped) |
| Add support for `all` collections in [`collection_viewed`](https://shopify.dev/docs/api/pixels/customer-events#collection_viewed) event | May 2023 (shipped) |
| Add `ordersCount` to [Customer](/docs/api/web-pixels-api/standard-events#customer) object| June 2023 (shipped) |
| Custom pixel saved versions | July 2023 (shipped) |
| Add `discountApplications ` to [Checkout](/docs/api/web-pixels-api/standard-events) object | July 2023 (shipped) |
| Add `DiscountApplication.allocationMethod ` to [Checkout](/docs/api/web-pixels-api/standard-events) object | July 2023 (shipped) |
| New [standard event](/docs/api/web-pixels-api/standard-events#standard-events): `cart_viewed` event | July 2023 (shipped) |
| New [standard event](/docs/api/web-pixels-api/standard-events#standard-events): `product_removed_from_cart` event | August 2023 (shipped) |
| Add `Product.url` to [ProductVariant](/docs/api/web-pixels-api/standard-events) | September 2023 (shipped) |
| Add `billingAddress` to [Checkout](/docs/api/web-pixels-api/standard-events) object | September 2023 (shipped) |
| New Custom Pixel Autocomplete - helps to write custom pixels referencing the [standard event](/docs/api/web-pixels-api/standard-events#standard-events) schema | September 2023 (shipped) |
| New [visitor API](/docs/api/web-pixels-api/emitting-data#visitor-api) | September 2023 (shipped) |
| Add `Transaction.gateway` to [Checkout](/docs/api/web-pixels-api/standard-events) object | October 2023 (shipped) |
| New [standard event](/docs/api/web-pixels-api/dom-events): DOM events - `clicked` , `input_blurred`, `input_focused`, `input_changed`, `form_submitted` | January 2024 (shipped) |
| Add `customer.id` to the [`Orders`](/docs/api/web-pixels-api/standard-events/checkout_completed) object| February 2023 (shipped) |
| Availability of new Pixel Granular Consent Purposes | April 2024 |
| Availability of new debugging and troubleshooting tools | Q2 2024 |
| Availability of standard events: tracking errors during checkout | Q3 2024 |
| Availability of support for extending data fields on standard events | Q1 2025 |