Add a product configuration extension
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.
What you'll learn
Anchor link to section titled "What 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.
Requirements
Anchor link to section titled "Requirements"- 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.
Step 1: Generate a new extension
Anchor link to section titled "Step 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:
Run one of the following commands to start creating the app extension:
Under
Admin, selectProduct configurationas the type of extension.Select a language for your extension.
Start your development server to build and preview your app:
To learn about the processes that are executed when you run
dev, refer to the Shopify CLI command reference.Press
pto open the developer console.In the developer console page, click on the preview link for the product configuration extension.
Step 2: Explore your project structure
Anchor link to section titled "Step 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:
Step 3: Deploy the extension
Anchor link to section titled "Step 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 all of your app extensions.
For more information about extension deployment and versioning, refer to Deploy app extensions.
- Navigate to your app directory.
Run one of the following commands.
Optionally, you can provide a name or message for the version using the
--versionand--messageflags.
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.
- Learn how to create a bundle app.