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:
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
, selectUI 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.