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:

• 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're a user with app development permissions and have created a dev store.

• You're using the latest version of Shopify CLI.
• You're using the latest version of Chrome or Firefox.

• Your dev store 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: Update the ,[object Object], configuration fileStep 1: 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 a URL that matches your app’s structure.

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

Available variables: {product_id}.

Anchor to Step 2: Deploy the extensionStep 2: 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 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. Verify the product configuration link appears correctly in the top right corner of the card.