• Technologies
  • Use cases
  • Next steps

Technologies for customizing Shopify checkout

There are many options available that allow you to customize and extend Shopify checkout. This guide introduces the available technologies for customizing checkout, and ways that you can extend checkout.

Technologies

Anchor link to section titled "Technologies"

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.
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 developer preview.

Merchants that have checkout.liquid customizations need to upgrade to Checkout Extensibility to use Function APIs.
Post-purchase checkout extensions Add new content to the post-purchase page All plans except Shopify Starter.

Currently in beta. Can be used without restrictions in a development store. To use post-purchase extensions on a live store, you need to request access.
Web pixel app 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

Use cases

Anchor link to section titled "Use 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.
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.
Post-purchase checkout extensions 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.
Web pixel app extensions Track customer behavior
  • Collect customer behavioral data to measure and optimize marketing campaign performance as well as your online store's conversion funnel.

Next steps

Anchor link to section titled "Next steps"
  • Learn how to get started building for checkout.
  • Learn how to use checkout UI and post-purchase extensions by following one of our use case tutorials.
  • Learn how to use Shopify Functions by following one of our use case tutorials.
  • Create a web pixel app extension to track customer behavior and subscribe to all events emitted by Shopify.
  • Use the GraphQL Admin API to apply branding changes to checkout.

On this page

  • Technologies
  • Use cases
  • Next steps