Add a UI extension

Info

Bundles apps that are built using Shopify Functions and cover the mix-and-match use case will be considered for inclusion as part of our upcoming bundles product launch. To be eligible to be included in our marketing campaign, your app must be approved to be listed in the Shopify App Store by May 31, 2023.

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. If you previously installed Shopify CLI, then make sure you're using the latest version.
You've installed Node.js 16 or higher.
You've installed your app on the development store.
You've requested access to the Bundles UI extension.

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:

Note

If you've previously installed cargo-wasi and updated Rust to version 1.67 or higher, then you also need to update to the latest cargo-wasi by running cargo install 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:
Under Shopify private, select UI Extension as the type of extension.

Note

If you don't see this option, then make sure you've requested access to the Bundles UI 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, the CheckoutDynamicRender file, and the README.md. Rename AdminCheckoutEditorRenderSettings to AdminProductConfigurationRender. 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:

Caution

The deploy command deploys all of the extensions that are included in your app.

Any unregistered extensions are registered during deployment. You can only register five checkout UI extensions with an app. After you register an extension, it can't be undone.

To learn about the processes that are executed when you run deploy, refer to the Shopify CLI command reference.

Next steps

Anchor link to section titled "Next steps"

Learn how to create a bundle app.