All Tutorials

Product subscription app extension overview

All Tutorials

Product subscription app extension overview

Product subscription app extension overview

The product subscription app extension can be used to render an interface that allows merchants to create and manage subscriptions in the Shopify admin.

This guide introduces the product subscription app extension and the Argo app extension framework, demonstrates the high-level subscription flow.

How subscriptions work with the product subscription app extension

The following diagram illustrates a high-level subscription flow for an app that has implemented a subscription flow using the product subscription app extension:

Subscriptions flow diagram

  • The app interacts with the selling plan API and the product subscription app extension to render an interface that allows merchants to create and manage subscriptions within the Shopify admin.
  • The customer purchases a subscription product on the storefront and Shopify generates a subscription contract.
  • The app updates the subscription contract using the subscription contract API when a change to a subscription occurs (a customer updates their payment method or makes a change to their subscription).
  • The app provisions subscriptions to customers by automating the billing and scheduling of subscriptions.

Argo app extension framework

The product subscription app extension renders in Shopify using Argo. Argo is a technology that allows apps to integrate directly into the Shopify admin, mobile apps, checkout, or POS. It includes a set of consistent UI components, and development tools for authoring them.

You create app extensions by writing JavaScript, React, or TypeScript to define your app’s behavior and describe your user interface. Shopify securely hosts and renders your user interface seamlessly in the client.

With Argo, you use session tokens to authenticate your app instead of relying on third-party cookies.

When the product subscription app extension appears to the merchant in Shopify admin, it includes both app-provided and Shopify-provided interface elements, as shown in the diagram below:

App extension framework diagram

Designing the best experience for merchants

Shopify renders a product subscription app extension in the product page, which contains a set of extension modes. Apps are responsible for integrating with these extension modes, allowing merchants to complete their tasks or access app functionality directly in the Shopify admin.

Apps can also include contextual links to active subscriptions in the Customers and Order detail pages.

Subscription apps should follow our user experience guidelines to provide a consistent experience.

Example product subscription app extension

An example product subscription app extension rendered in Shopify

Next steps