Migrate to Shopify CLI
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
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.
- In the Partner Dashboard, navigate to your app.
- Navigate to the Extensions tab in the left sidebar.
- Select your extension of type Product Configuration link.
- 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
shopify.extension.toml
configuration file- In your app's codebase, navigate to your extension directory.
- Open the
shopify.extension.toml
configuration file. - 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.
-
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 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.
