Add a UI extension
This guide describes how to add a UI extension for bundles in the Shopify admin.
What you'll learn
Anchor link to section titled "What you'll learn"In this tutorial, you’ll learn how to do the following tasks:
- Create a bundles UI extension point.
- Render the extension on the product details page of the Shopify admin.
Requirements
Anchor link to section titled "Requirements"- You've created a Partner account.
- You've created a development store.
- You've created an app that uses Shopify CLI 3.0 or higher, or you've migrated your existing app so that it's compatible with Shopify CLI 3.0 or higher.
- You've installed your app on the development store.
Rust-specific requirements
Anchor link to section titled "Rust-specific requirements"The following requirements are specific to Rust-based development with Shopify Functions.
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:
Step 1: Generate a new extension
Anchor link to section titled "Step 1: Generate a new extension"Use Shopify CLI to generate a new extension.
Navigate to your app directory.
Run the following command to start creating the app extension:
Select
UI extension
as the type of extension.Provide a name for your extension using either dash case or snake case.
Step 2: Modify the generated boilerplate
Anchor link to section titled "Step 2: Modify the generated boilerplate"When the extension is created, your directory should look something like this:
Make the following modifications:
Delete the
locales
directory, theCheckoutDynamicRender
file, and theREADME.md
. RenameAdminCheckoutEditorRenderSettings
toAdminProductConfigurationRender
. After you do this, your directory should look like the following:Replace the contents of
shopify.ui.extension.toml
with the following configuration information:Replace the contents of the
AdminProductConfigurationRender.tsx
file with the following code:Remove the
@shopify/checkout-ui-extensions-react
package:Add the
@shopify/admin-ui-extensions-react
package:
Step 3: Deploy the extension
Anchor link to section titled "Step 3: Deploy the extension"When you're ready, you can deploy your extension code to Shopify.
Navigate to your app directory.
Run one of the following commands:
To learn about the processes that are executed when you run
deploy
, refer to the Shopify CLI command reference.
- Learn how to create a bundle app.