Options 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.
TechnologiesAnchor link to section titled "Technologies"
You can customize Shopify checkout using the following technologies:
|Checkout UI extensions||Add custom UI or content to the checkout process and order status page||Shopify Plus.
Order status page 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 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:
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||
|GraphQL Admin API||Customize the look and feel of checkout||
|Shopify Functions||Extend or replace key parts of Shopify’s backend with custom logic||
|Post-purchase checkout extensions||Add new content to the post-purchase page||
|Web pixel app extensions||Track customer behavior||
Getting startedAnchor link to section titled "Getting started"
To get started with Checkout UI extensions, Shopify Functions, Post-purchase extensions, or Web pixel app extensions, you can use Shopify CLI, which generates starter code for building your extension and automates common development tasks.
General requirementsAnchor link to section titled "General requirements"
- You've created a Partner account.
You've created a new development store, where you've enabled the checkout extensibility developer preview.
The following extension types don't require you to enable the checkout extensibility developer preview:
Function - Delivery customization
Function - Order discount
Function - Payment customization
Function - Product discount
You understand how apps fit into Shopify.
You've installed Node.js 14.17.0 or higher.
You've installed a Node.js package manager: either npm, Yarn 1.x, or pnpm.
You've installed Git 2.28.0 or higher.
Language-specific requirements for writing Shopify Functions in RustAnchor link to section titled "Language-specific requirements for writing Shopify Functions in Rust"
You've installed Rust.
On Windows, Rust requires the Microsoft C++ Build Tools. Make sure to select the Desktop development with C++ workload when installing the tools.
You've installed cargo-wasi:
Create an app:
Navigate to your app directory:
Run one of the following commands to create a new extension:
Choose from one of the following extension types:
- Checkout UI
- Function (any of the sub-types)
- Post-purchase UI
- Web Pixel
Select a language for your extension.
For this quickstart, if you chose a
Complete one of the following steps:
If you chose a
Web Pixelextension type, then start your development server to build and preview your app:
pto open the developer console. In the developer console page, click on the preview link for your extension.
If you chose a
Functionextension type, then navigate to
extensions/my-extensionand build the function's Wasm module:
Navigate back to your app root and deploy your app:
A message from the CLI displays and indicates that your
my-extensionfunction is live.
- 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.