Skip to main content

Migrate to Shopify CLI

Tip

To add a product configuration link to your product configuration UI extension, you must be using Shopify CLI version 3.76 or above.

Learn how to create product configuration extensions with Shopify CLI.

If you have a product configuration link extension that was created through the Partner Dashboard, you must move this link to a product configuration UI extension to continue managing it. Moving forward, the product configuration link will be set in the shopify.extension.toml file of the product configuration UI extension.

This file allows developers to define how the product configuration card behaves, including its destination URL and the rendering of a custom UI. The URL template is set using [extensions.targeting.urls].

extensions/product-configuration/shopify.extension.toml

[[extensions.targeting]]
module = "./src/ProductDetailsConfigurationExtension.jsx"
target = "admin.product-details.configuration.render"

[extensions.targeting.urls]
edit = "/bundles/products/{product_id}"

In this tutorial, you'll learn how to do the following tasks:

  • Retrieve your URL template pattern from the Partner Dashboard.
  • Update the shopify.extension.toml configuration file with your URL template pattern.
  • Deploy your extension code to Shopify.
  • Preview the rendered extension on the product details page in the Shopify admin.


Anchor to Step 1: Retrieve your URL template pattern from the Partner DashboardStep 1: Retrieve your URL template pattern from the Partner Dashboard

To access the URL template pattern for your product configuration link extension, you must first retrieve the extension from the Partner Dashboard.

  1. In the Partner Dashboard, navigate to your app.
  2. Navigate to the Extensions tab in the left sidebar.
  3. Select your extension of type Product Configuration link.
  4. Copy the URL template pattern from the Edit page.
    An image of the product configuration link template pattern field in the Partner Dashboard.

Anchor to Step 2: Update the ,[object Object], configuration fileStep 2: Update the shopify.extension.toml configuration file

  1. In your app's codebase, navigate to your extension directory.
  2. Open the shopify.extension.toml configuration file.
  3. Update the [extensions.targeting.urls] configuration with the URL template pattern that you copied from the Partner Dashboard.

The field accepts a URL template pattern which expands template variables according to RFC 6570.

Available variables: {product_id}.

[[extensions.targeting]]
module = "./src/ProductDetailsConfigurationExtension.jsx"
target = "admin.product-details.configuration.render"

[extensions.targeting.urls]
edit = "/bundles/products/{product_id}"

Anchor to Step 3: Deploy the extensionStep 3: 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.

  1. Navigate to your app directory.

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

Tip

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 Step 4: Preview the extensionStep 4: Preview the extension

Navigate to your customized bundle product page in the Shopify admin. Your extension will be rendered within bundled products card. Verify the product configuration link appears correctly in the top right corner of the card.

A product configuration extension rendered within the Shopify admin.

Was this page helpful?