Get started with product subscription app 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 learnAnchor link to section titled "What you'll learn"
In this tutorial, you'll learn how to do the following tasks:
- Create a new extension
- Run the extension locally and test it on a development store
RequirementsAnchor link to section titled "Requirements"
- Create a Partner account.
- Create a new development store and enable the product subscription app extension.
- Populate your store with test products.
- Create an ngrok account and auth token. The ngrok token is used when previewing your app with Shopify CLI. To learn more about creating an auth token, refer to ngrok’s documentation.
Access scopesAnchor link to section titled "Access scopes"
Your app requires the following access scopes:
SubscriptionsAnchor link to section titled "Subscriptions"
Deferred purchase optionsAnchor link to section titled "Deferred purchase options"
Step 1: Scaffold a new extensionAnchor link to section titled "Step 1: Scaffold a new extension"
Use Shopify CLI to scaffold a new extension.
Navigate to your app directory.
Run the following command to start creating the product subscription app extension:
subscription UIas the type of extension.
Provide a name for your extension using either dash case or snake case.
Select a template for your extension. You can choose from vanilla JS or React.
You should now have a new extension directory that includes the extension script at
Step 2: Preview your extensionAnchor link to section titled "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 ngrok to create a tunnel that allows your app and extension to be accessed using a unique HTTPS URL.
- Navigate to your app directory.
Either start or restart your server to build and preview your app:
When you run the
devcommand, the CLI builds and serves your app. It also walks you through multiple configuration steps. If you've already run
devfor this app, then some of these steps are skipped. In some cases, you might be required to manually kill an ngrok terminal that's already running.
To learn about the processes that are executed when you run
dev, refer to the Shopify CLI command reference.
Click on the URL printed at the bottom of the CLI output to view your extension.
Step 3: Check the extension script statusAnchor link to section titled "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.
Click the Developer Console navigation option.
You should see the green Connected status badge and other data related to your extension.
You should also see a Subscriptions card on the product page. You might need to scroll down to see it.
Update the extension script at either
./index.jsand test it in your development store.
For information on rendering extension points, refer to Create and manage a product subscription app extension.
Step 4: Test your extension in the Shopify mobile appAnchor link to section titled "Step 4: Test your extension in the Shopify mobile app"
You can test your extension in the Shopify mobile app using the Developer console.
Log in to your development store on the Shopify mobile app.
Click Developer Console, then click on the mobile icon to generate a QR code.
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.
- Learn about extension points