Add a UI extension

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.

• 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.

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:

Use Shopify CLI to generate a new extension.

1. Navigate to your app directory.

2. Run the following command to start creating the app extension:

3. Select UI extension as the type of extension.

4. Provide a name for your extension using either dash case or snake case.

When the extension is created, your directory should look something like this:

Make the following modifications:

1. Delete the locales directory, the CheckoutDynamicRender file, and the README.md. Rename AdminCheckoutEditorRenderSettings to AdminProductConfigurationRender. After you do this, your directory should look like the following:

2. Replace the contents of shopify.ui.extension.toml with the following configuration information:

3. Replace the contents of the AdminProductConfigurationRender.tsx file with the following code:

4. Remove the @shopify/checkout-ui-extensions-react package:

5. Add the @shopify/admin-ui-extensions-react package:

When you're ready, you can deploy your extension code to Shopify.

1. Navigate to your app directory.

2. 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.