> Deprecated:
> Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to [purchase options extensions](/docs/apps/build/purchase-options/purchase-options-extensions).


You can build a product subscription app extension using App Bridge Admin. This tutorial explains how to get started building a product subscription app extension.

## What you'll learn

In this tutorial, you'll learn how to do the following tasks:

- Create a product subscription app extension.
- Run the extension locally and test it on a development store.

## Requirements

> Note:
>
> - Most subscriptions, pre-order and try before you buy apps need to request API access through the [Partner Dashboard](/docs/apps/build/authentication-authorization/access-tokens/authorization-code-grant#ask-for-permission). We give API access to apps that are designed according to our [principles for subscriptions, pre-order and TBYB apps] (/docs/apps/selling-strategies/purchase-options#shopifys-principles).
> - Public apps that use subscriptions, pre-order or TBYB need to meet [specific requirements](/docs/apps/launch/app-requirements-checklist#purchase-option-apps) to be published on the Shopify App Store.
> - Custom apps [created in the Shopify admin](/docs/apps/build/authentication-authorization/access-tokens/generate-app-access-tokens-admin) can't use subscriptions, pre-order or TBYB because these apps can't use extensions or request access to protected scopes. If you're building a solution for a single store, then build your custom app in the Partner Dashboard.


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

### Access scopes

Your app requires the following [access scopes](/docs/apps/build/purchase-options#access-scopes):

#### Subscriptions

- `write_products`
- `read_customer_payment_methods`
- `read_own_subscription_contracts`
- `write_own_subscription_contracts`


#### Deferred purchase options

- `write_products`
- `read_all_orders`
- `read_customer_payment_methods`
- `read_purchase_options`
- `write_purchase_options`
- `read_payment_mandate`
- `write_payment_mandate`


## Step 1: Generate a new extension

Use Shopify CLI to generate a new extension.

1. Navigate to your app directory.

2. To start creating the app extension, run the following command:

    <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 
    </script>

    </div>
    </p>


3. Select `subscription UI` as the type of extension.

4. Provide a name for your extension using either dash case or snake case.

5. Select a template for your extension. You can choose from Vanilla JS or React.

    > Tip:
    > Vanilla JS is suitable for smaller projects that require a more straightforward API. React is suitable when you want an easy model for mapping state updates to UI updates. With Vanilla JS, you need to map state updates yourself. This process is similar to writing a vanilla application targeting the DOM, versus using `react-dom`.

You should now have a new extension directory that includes the extension script at `src/index.{file-extension}`.

## Step 2: Preview your extension

After your extension is created, you can work with it by building the app and starting a local development server.

Shopify CLI uses [Cloudflare](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/do-more-with-tunnels/trycloudflare/) to create a tunnel that allows your app and extension to be accessed using a unique HTTPS URL.

1. Navigate to your app directory.
2. Either start or restart your 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>


      <br>
      When you run the `dev` command, Shopify CLI builds and serves your app. It also walks you through multiple configuration steps. If you've already run `dev` for this app, then some of these steps are skipped.

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

      > Tip
      > You can test using a specific product ID by passing it in using the `--subscription-product-url` flag. For example, `--subscription-product-url="/products/12345"`, where `12345` is the product variant ID.

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


## Step 3: Check the extension script status

Now that you have your local extension running in your development store, you can check the app extension status and update the extension script.

1. Click the **Developer Console** navigation option.

    ![Developer Console navigation item](/assets/api/app-extensions/argo/developer-console-navigation.png)

    You should see the green **Connected** status badge and other data related to your extension.
      ![Developer Console](/assets/api/app-extensions/argo/developer-console.png)

    You should also see a **Subscriptions** card on the product page. You might need to scroll down to see it.
      ![Developer console with subscriptions card](/assets/api/app-extensions/argo/developer-console-subscription-card.png)

1. Update the extension script at either `./index.ts(x)` or `./index.js` and test it in your development store.

    For information on rendering extension points, refer to [Create and manage a product subscription app extension](/docs/apps/build/purchase-options/product-subscription-app-extensions/create-and-manage).

    > Tip
    > The Developer console automatically reloads the extension after you've saved the changes to your script.

## Step 4: Test your extension in the Shopify mobile app

You can test your extension in the Shopify mobile app using the Developer console.

1. Log in to your development store on the Shopify mobile app.

1. Click **Developer Console**, then click on the mobile icon to generate a QR code.
  ![Developer console mobile QR code](/assets/api/app-extensions/argo/developer-console-qr-code.png)

1. Use the camera on your mobile device or a QR code scanning app of your choice to scan the QR.

    The Shopify mobile app opens the product details view, and your extension is available in the **Subscriptions** card.
  <div style="width: 50%; display: block; margin: 0 auto;">![Mobile subscription extension](/assets/api/app-extensions/argo/argo-mobile-extension.png)</div>

## Next steps

- Learn about [extension points](/docs/apps/build/purchase-options/product-subscription-app-extensions/extension-points).