Get started building a product subscription app extension
This tutorial explains how to get started building a product subscription app extension using App Bridge Admin. For more information on the business logic behind subscriptions, refer to the Selling plan API.
How a product subscription app extension looks in Shopify
Shopify renders a new section, called a subscription card, on the product page to display subscription information to the merchant:
If a merchant clicks Add option, then an app overlay appears. Your extension built with App Bridge Admin is responsible for rendering the content and creating the subscription plan.
Scaffold a product subscription app extension
You can use Shopify CLI to create a product subscription app extension scaffold.
Open a terminal and enter the following command to create a new product subscription app extension:
Follow the instructions in order to scaffold your product subscription app extension.
You should now have a new project folder, where you can find the extension script at either
Run the local extension in your development store
To run your extension in your development store you:
Navigate to the project folder and start a local server to make the extension available to your development store:
Follow the prompts to associate your extension to your app and development store.
Navigate to the ngrok tunnel URL that is output in the terminal to open the product page in your development store.
If you don't have any products on your development store, then you can either manually create one or run the following command in your project's folder to generate 5 mock products in your development store:
Building your extension
Now that you have your local extension running in your development store, you can iterate on it.
Click the Developer Console navigation option.
You should see the green
Connected status badge along with other data related to your extension.
You should also see a card titled "Subscriptions" on the product page. You might need to scroll down to see it.
For more information on rendering extension points, refer to Create and manage a product subscription app extension.
You can update the extension script at either
./index.js and test it in your development store.
You can test your extension in the Shopify mobile app using the developer console:
Log into your development store on the Shopify mobile app.
In the browser, click on the mobile icon in the Developer Console 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 code from the Developer Console to open the product details view on the Shopify mobile app. Your extension is available in the subscriptions card.
The product subscription app extension uses multiple extension points. Each extension point is triggered by a different merchant action, receives different data, and is responsible for handling a distinct part of the subscription experience. For more information on the available extension modes, refer to Create and manage a product subscription app extension.
The different extension points are:
They must be rendered separately.
Your extension receives data from the host page in your extension. In this example, the current product is being rendered inside the extension as (Product 1):
src/index.js, find the Create extension point callback function. In the first line of the function, the
data variable is assigned to the input data passed into the extension from the host page.
In React, access input data with the
The final section of the Create function renders the UI components that appear in the canvas of the app overlay. Refer to components available to the product subscription app extension.
To upgrade from using the simulator to using the Developer Console:
Upgrade the Shopify CLI
Update the admin-ui-extensions-run package
Restart your extension server