Skip to main content

​
Extensions Overview

The Shopify Subscriptions Reference App includes a comprehensive set of extensions that integrate subscription functionality across multiple touchpoints in the Shopify ecosystem. These extensions work together to provide a seamless subscription experience for both merchants and customers.

​
Extension Architecture

The extensions are built using Shopify’s UI Extensions framework and are organized into distinct modules that target specific areas of the platform:

Admin Extensions

Merchant-facing tools for managing subscription plans and settings

Customer Extensions

Customer account pages for managing active subscriptions

Theme Extensions

Storefront components for subscription product selection

POS Extensions

Point of sale integration for in-person subscription sales

​
Included Extensions

The reference app includes the following extensions:

​
Admin UI Extensions

admin-subs-action
  • Creates and manages selling plan groups
  • Configures subscription pricing and delivery options
  • Targets: admin.product-purchase-option.action.render and admin.product-variant-purchase-option.action.render
subscription-admin-link
  • Deep links from Shopify admin to subscription contract pages
  • Pattern: /app/contracts/{contract_id}

​
Customer Account Extensions

buyer-subscriptions
  • Main subscription management interface for customers
  • View all active subscriptions
  • Manage subscription details, delivery dates, and payment methods
  • Target: customer-account.page.render
buyer-subscriptions-oa (Order Actions)
  • Adds “Manage subscription” button to order details
  • Links to subscription management from order history
  • Target: customer-account.order.action.menu-item.render
thank-you-page
  • Displays subscription management link on post-purchase thank you page
  • Only visible for orders containing subscriptions
  • Target: purchase.thank-you.block.render

​
Storefront Extensions

theme-extension
  • Liquid-based theme blocks for product pages
  • Displays subscription options and pricing
  • Integrates with existing theme architecture

​
Point of Sale Extensions

pos-extension
  • Multiple UI components for POS subscription management
  • Cart line item actions for adding subscriptions
  • Home screen tile for quick access
  • Targets: pos.cart.line-item-details.action.render, pos.home.tile.render

​
Extension Collection

The buyer-subscriptions-collection groups related customer-facing extensions together: 
[[extensions]]
name = "Subscriptions"
handle = "buyer-subscriptions-collection"
type = "editor_extension_collection"
includes=["buyer-subscriptions", "buyer-subscriptions-oa", "thank-you-page"]
This collection ensures all customer account extensions are deployed and managed as a cohesive unit.

​
How Extensions Integrate

The extensions work together to create a complete subscription workflow:
1

Merchant Setup

Merchants use admin-subs-action to create selling plan groups with pricing and delivery options on their products.
2

Customer Purchase

Customers select subscription options via theme-extension on product pages or pos-extension in retail stores.
3

Post-Purchase

After checkout, thank-you-page provides immediate access to subscription management.
4

Ongoing Management

Customers manage subscriptions through buyer-subscriptions, accessible from their account or via buyer-subscriptions-oa from order details.
5

Admin Monitoring

Merchants access subscription contracts via subscription-admin-link for support and management.

​
Extension Capabilities

Most extensions include the following capabilities:
  • API Access: GraphQL access to Shopify APIs for data fetching and mutations
  • Network Access: Ability to make external network requests
  • Localization: Multi-language support via locale files
All extensions use API version 2025-01 or 2025-10 (except admin-subs-action which uses unstable for early access features).

​
Development Structure

Extensions follow a consistent structure: 
extensions/
├── [extension-name]/
│   ├── shopify.extension.toml   # Extension configuration
│   ├── src/                      # Source code
│   │   ├── index.tsx            # Entry point
│   │   ├── components/          # React/Preact components
│   │   ├── hooks/               # Custom hooks
│   │   └── graphql/             # GraphQL queries/mutations
│   ├── locales/                 # Internationalization files
│   └── package.json             # Dependencies

​
Next Steps

Explore specific extension documentation:

Build docs developers (and LLMs) love

Get started for freeTalk to us