--- title: Start building for checkout description: >- Learn how to get started building with checkout UI extensions, Shopify Functions, or web pixel extensions. source_url: html: 'https://shopify.dev/docs/apps/build/checkout/start-building' md: 'https://shopify.dev/docs/apps/build/checkout/start-building.md' api_name: checkout-ui-extensions --- # 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](https://shopify.dev/docs/apps/build/checkout/styling), such as changing the colors and corner radius settings on checkout form fields. **Shopify Plus:** Checkout UI extensions are available only to [Shopify Plus](https://www.shopify.com/plus) merchants. To build and test checkout UI extensions, use a [development store with Shopify Plus enabled](https://shopify.dev/docs/apps/build/stores/development-stores#create-a-dev-store). *** ## Requirements * You're a [user with app development permissions](https://shopify.dev/docs/apps/build/dev-dashboard/user-permissions) and have created a [dev store](https://shopify.dev/docs/apps/build/stores/development-stores). You can create one by running `shopify store create dev`. - You're using the latest version of [Shopify CLI](https://shopify.dev/docs/api/shopify-cli). - You're using the latest version of [Chrome](https://www.google.com/chrome/) or [Firefox](https://www.mozilla.org/). ### Language-specific requirements for writing Shopify Functions in Rust * You've installed [Rust](https://www.rust-lang.org/tools/install). On Windows, Rust requires the [Microsoft C++ Build Tools](https://docs.microsoft.com/en-us/windows/dev-environment/rust/setup). Make sure to select the **Desktop development with C++** workload when installing the tools. * You've installed the [`wasm32-unknown-unknown`](https://doc.rust-lang.org/rustc/platform-support/wasm32-unknown-unknown.html) build target. ## Terminal ```terminal rustup target add wasm32-unknown-unknown ``` *** ## (Optional) Set up the Shopify AI Toolkit Install the [Shopify AI Toolkit](https://shopify.dev/docs/apps/build/ai-toolkit) to connect your AI coding assistant to Shopify's docs, APIs, and CLI. Your assistant gets the Shopify context it needs to answer questions, write code, and run commands more reliably. #### Claude Code In your terminal, run `claude plugin install`: ## Terminal ```terminal claude plugin install shopify-ai-toolkit@claude-plugins-official ``` #### Codex In your terminal, run `codex plugin add`: ## Terminal ```terminal codex plugin add shopify@openai-curated ``` #### Antigravity CLI In your terminal, install the Shopify plugin: ## Terminal ```terminal agy plugin install https://github.com/Shopify/shopify-ai-toolkit ``` #### Cursor In Cursor Chat, add the Shopify plugin: ## Cursor Chat ```terminal /add-plugin shopify ``` #### Hermes In your terminal, download the install script and run it: ## Terminal ```terminal curl -fsSL https://raw.githubusercontent.com/Shopify/Shopify-AI-Toolkit/main/.hermes-plugin/install.sh -o /tmp/shopify-hermes-install.sh bash /tmp/shopify-hermes-install.sh ``` #### OpenClaw In your terminal, install the Shopify plugin from npm: ## Terminal ```terminal openclaw plugins install npm:@shopify/ai-toolkit ``` #### Pi In your terminal, install the package from npm: ## Terminal ```terminal pi install npm:@shopify/ai-toolkit ``` #### VS Code 1. Ensure the [Agent plugins](https://code.visualstudio.com/docs/copilot/customization/agent-plugins) preview is enabled in your VS Code settings. 2. Open the Command Palette (`Cmd+Shift+P` on macOS, `Ctrl+Shift+P` on Windows/Linux) and run: ## VS Code: Command Palette Chat: Install Plugin From Source 3. When prompted, enter the repository URL: ## VS Code: Plugin source URL https://github.com/Shopify/shopify-ai-toolkit *** ## Get started 1. Scaffold an app: ## Terminal ```terminal shopify app init ``` 2. Navigate to your app directory: ## Terminal ```terminal cd ``` 3. Run the following command to create a new extension: ## Terminal ```terminal shopify app generate extension --name my-extension ``` 4. Choose from one of the following extension types: * **Checkout UI** * **Function** (any of the sub-types) * **Post-purchase UI** * **Web Pixel** 5. Select a language for your extension. For this quickstart, if you chose a `Function` extension type, then select either **Rust** or **JavaScript**. 6. Complete one of the following steps: * If you chose a `Checkout UI`, `Post-purchase UI` or `Web Pixel` extension type, then start your development server to build and preview your app: ## Terminal ```terminal shopify app dev ``` Press `p` to open the Dev Console. In the extension list for your app, click on the preview link for your extension. * If you chose a `Function` extension type, then navigate to `extensions/my-extension` and build the function's Wasm module: ## Terminal ```terminal cd extensions/my-extension cargo build --target=wasm32-unknown-unknown --release ``` To test your function, you need to make it available to your dev store. [Learn more](https://shopify.dev/docs/apps/build/functions/test-debug-functions#testing-on-your-development-store). *** ## Next steps * Learn how to use checkout UI and post-purchase extensions by following [one of our use case tutorials](https://shopify.dev/docs/api/checkout-extensions#getting-started). * If your extension makes authenticated calls to your app's backend using the [Session Token API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/session-token-api), then build the backend with one of Shopify's [official libraries](https://shopify.dev/docs/api/libraries-and-templates#official-api-libraries). Official packages are available for Node.js, Ruby, PHP (including Laravel), and Python (including Django). ***