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

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

- You've created a [Partner account](https://www.shopify.com/partners).
- You've created a [development store](/docs/api/development-stores) that uses [generated test data](/docs/api/development-stores/generated-test-data).
- You've [created an app that uses Shopify CLI 3.0 or higher](/docs/apps/build/scaffold-app). If you previously installed Shopify CLI, then make sure you're using the [latest version](/docs/api/shopify-cli#upgrade).
- You've installed [Node.js](https://nodejs.org/en/download) 16 or higher.
- You've created a [customized bundle](/docs/apps/build/product-merchandising/bundles/add-customized-bundle) on your shop.

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

1. Navigate to your app directory:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    cd <directory>
    </script>

    </div>
    </p>


2. Run the following command to start creating the app extension:
    <p>
        <div class="react-code-block" data-preset="terminal">
        <div class="react-code-block-preload ThemeMode-dim">
        <div class="react-code-block-preload-bar "></div>
        <div class="react-code-block-preload-placeholder-container">
        <div class="react-code-block-preload-code-container">
        <div class="react-code-block-preload-codeline-number"></div>
        <div class="react-code-block-preload-codeline"></div>
        </div>

        </div>
        </div>


        <script type="text/plain" data-language="bash">
        shopify app generate extension --template product_configuration --name my-product-config-extension
        </script>

        </div>
        </p>


3. Select a language for your extension.

4. Start your development server to build and preview your app:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    shopify app dev 
    </script>

    </div>
    </p>


    To learn about the processes that are executed when you run `dev`, refer to the [Shopify CLI command reference](/docs/api/shopify-cli/app/app-dev).

1. Press `p` to open the developer console. 
1. In the developer console page, click on the preview link for the product configuration extension.


## 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:

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="Product configuration extension file structure"></script>

<script type="text/plain" data-language="none">
└── my-app
  └── extensions
        └── my-product-config-extension
            ├── src
            │   └── ProductDetailsConfigurationExtension.ts[x] OR ProductDetailsConfigurationExtension.js[x] // The product details page of the extension
            │   └── ProductVariantDetailsConfigurationExtension.ts[x] OR ProductVariantDetailsConfigurationExtension.js[x] // The product variant details page of the extension
            ├── locales
            │   ├── en.default.json // The default locale for the extension
            │   └── fr.json // The locale file for non-regional French translations in the extension
            ├── shopify.extension.toml // The config file for the extension
            └── package.json
</script>

</div>
</p>


> Tip:
> To learn about the UI components that you can use for your extension, refer to [Admin UI extensions](/docs/api/admin-extensions/components).

## Step 3. Preview the extension

Navigate to your customized bundle product page in the Shopify admin. Your extension will be rendered within Bundled products card.

![A product configuration extension rendered within the Shopify admin.](/assets/apps/bundles/product-configuration-extension.png)

## Step 4: Deploy the extension

When you're ready to release your changes to users, you can create and release an [app version](/docs/apps/launch/deployment/app-versions). 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.

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    shopify app deploy 
    </script>

    </div>
    </p>


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`](/docs/api/shopify-cli/app/app-release) command, or through the Partner Dashboard.



## Next steps

- Learn how to [create a bundle app](/docs/apps/build/product-merchandising/bundles/create-bundle-app).