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.
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 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 started
Anchor 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 requirements
Anchor link to section titled "General requirements"- You've created a Partner account.
- You've created a new development store. Depending on the extension type that you're generating, you might also need to enable the checkout extensibility developer preview.
- You understand how apps fit into Shopify.
You've installed Node.js 16 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 Rust
Anchor 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
Function
extension type, then select either JavaScript or Rust.Complete one of the following steps:
If you chose a
Checkout UI
,Post-purchase UI
orWeb Pixel
extension type, then start your development server to build and preview your app:Press
p
to open the developer console. In the developer console page, click on the preview link for your extension.If you chose a
Function
extension type, then navigate toextensions/my-extension
and build the function's Wasm module:To test your function, you need to make it available to your development store. Learn more.
- 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.