Start building for checkout
To get started with checkout UI extensions, Shopify Functions or web pixel extensions, you can use Shopify CLI, which generates starter code for building your extension and automates common development tasks.
The following is a lightweight guide for getting started to build. You can alternatively learn how to use the GraphQL Admin API to style checkout for a brand, such as changing the colors and corner radius settings on checkout form fields.
Anchor to RequirementsRequirements
- 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 and Customer Accounts Extensibility developer preview.
- You're using the latest version of Shopify CLI.
- You're using the latest version of Chrome or Firefox.
Anchor to Language-specific requirements for writing Shopify Functions in RustLanguage-specific requirements for writing Shopify Functions in Rust
Anchor to Get startedGet started
-
Scaffold an app:
Terminal
shopify app init -
Navigate to your app directory:
Terminal
cd <directory> -
Run the following command to create a new extension:
Terminal
shopify app generate extension --name my-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 Rust or JavaScript. -
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:Terminal
shopify app devPress
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:Terminal
cd extensions/my-extensioncargo build --target=wasm32-wasip1 --releaseTo test your function, you need to make it available to your development store. Learn more.
-
Anchor to Next stepsNext steps
- Learn how to use checkout UI and post-purchase extensions by following one of our use case tutorials.