Migrate to 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].

Anchor to What you'll learnWhat you'll learn

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 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.76 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.
• You've created a product configuration extension.

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.

   

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

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

   Copy

   $

   $

   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.

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.