Add a UI for merchant customization
Creating new product configuration link extensions through the Partner Dashboard will soon be deprecated. If you have an existing product configuration link extension and would like to continue to manage it, then please refer to our migration guide
You can add a product configuration extension that renders a UI to enable merchants to interact with bundles on the product details page in the Shopify admin. This guide describes how you can generate, preview, and deploy a product configuration extension.
Anchor to What you'll learnWhat you'll learn
In this tutorial, you'll learn how to do the following tasks:
- Generate a product configuration extension.
- Preview the rendered extension on the product details page in the Shopify admin.
- Deploy your extension code to Shopify.
Anchor to RequirementsRequirements
- You've created a Partner account.
- You've created a development store that uses generated test data.
- You've created an app that uses 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 created a customized bundle on your shop.
Anchor to Step 1: Generate a new extensionStep 1: Generate a new extension
To create a product configuration extension, you can use Shopify CLI, which generates starter code for building your extension and automates common development tasks.
-
Navigate to your app directory:
Terminal
cd <directory> -
Run the following command to start creating the app extension:
Terminal
shopify app generate extension --template product_configuration --name my-product-config-extensionOptional: You can provide a name or message for the version using the --version and --message flags.
-
Select a language for your extension.
-
Start your development server to build and preview your app:
Terminal
shopify app devTo learn about the processes that are executed when you run
dev
, refer to the Shopify CLI command reference.
- Press
p
to open the developer console. - In the developer console page, click on the preview link for the product configuration extension.
Anchor to Step 2: Explore your project structureStep 2: Explore your project structure
Open your code editor and navigate to your product configuration project directory. The product configuration template provides the following structure and you can modify the files, as needed:
Product configuration extension file structure
To learn about the UI components that you can use for your extension, refer to Admin UI extensions.
Anchor to Step 3: Add an edit link to your extensionStep 3: Add an edit link to your extension
To customize your edit link in the shopify.extension.toml
file, you must have created an app that uses Shopify CLI 3.76 or higher. If you previously installed Shopify CLI, then make sure you're using the latest version.
Optional: You can customize the edit link in your product configuration extension by setting it in the shopify.extension.toml
configuration file. The field accepts a URL template pattern which expands template variables according to RFC 6570.
Available variables: {product_id}.
`shopify.extension.toml` configuration file
Anchor to Step 4: Preview the extensionStep 4: Preview the extension
Anchor to Step 3: Preview the extensionStep 3: Preview the extension
Navigate to your customized bundle product page in the Shopify admin. Your extension will be rendered within Bundled products card.

Anchor to Step 5: Deploy the extensionStep 5: Deploy the extension
Anchor to Step 4: Deploy the extensionStep 4: Deploy the extension
When you're ready to release your changes to users, you can create and release an app version. An app version is a snapshot of your app configuration and all extensions.
-
Navigate to your app directory.
-
Run the following command.
Optionally, you can provide a name or message for the version using the
--version
and--message
flags.Terminal
shopify app deploy
Releasing an app version replaces the current active version that's served to stores that have your app installed. It might take several minutes for app users to be upgraded to the new version.
If you want to create a version, but avoid releasing it to users, then run the deploy
command with a --no-release
flag.
You can release the unreleased app version using Shopify CLI's release
command, or through the Partner Dashboard.
Anchor to Next stepsNext steps
- Learn how to create a bundle app.