Understanding Shopify Selling Plans
Subscriptions on Shopify are powered by the Selling Plans API, which defines how a product can be sold on a recurring basis. A selling plan group contains one or more selling plans, each specifying a delivery frequency, pricing policy, and billing policy. When a customer selects a subscription option on a product page, they are choosing a selling plan that gets attached to the line item at checkout. This architecture separates the subscription logic from the product itself, meaning any product can be made subscribable without duplicating variants or creating shadow products.
The Selling Plans API supports several pricing adjustment types: fixed amount off, percentage off, and fixed price. This flexibility lets you offer "Subscribe and save 15%" alongside "Subscribe at $9.99/month" on the same product. The key is that these adjustments are defined at the selling plan level and enforced by Shopify's checkout, so the discount is guaranteed and auditable. For merchants migrating from third-party subscription platforms, understanding this native data model is essential before building any custom widget.
Building the Widget UX
A well-designed subscription widget needs to communicate three things instantly: the frequency options, the savings, and the flexibility to cancel or modify. The most effective pattern is a toggle between "One-time purchase" and "Subscribe & Save" placed directly below the product price. When the customer selects the subscription option, the widget expands to reveal a frequency dropdown (e.g., every 2 weeks, monthly, every 2 months) and updates the displayed price in real time to reflect the discount. This immediate visual feedback is critical for conversion, as customers need to see exactly what they are committing to.
Displaying the save percentage prominently next to each frequency option significantly increases subscription opt-in rates. A label like "Save 20% — delivered every month" is more persuasive than simply listing "$8.00/month." Beyond the initial selection, consider adding a tooltip or collapsible section that explains how the subscription works: when they will be charged, how to skip or swap products, and how to cancel. Transparency at the point of purchase reduces churn downstream because customers feel informed rather than locked in.
Integration and Technical Patterns
On the technical side, the widget needs to interact with the Storefront API or the product form's selling plan allocation data. When a product page loads, query the available selling plan groups and their associated plans. Each plan includes its pricing adjustments, delivery policies, and a unique identifier. When the customer picks a frequency, update the hidden form input with the corresponding selling plan ID so that the correct subscription terms are passed to the cart. If you are using a headless storefront, this means calling the Storefront API's product query with the sellingPlanGroups connection and rendering the options yourself.
For stores using Liquid themes, the product object already exposes selling_plan_groups, and each variant includes selling_plan_allocations that provide the pre-calculated prices per plan. You can loop through these in your product template to build the widget without any additional API calls. The challenge is keeping the UI reactive: when a customer changes the variant (e.g., different size or flavor), the available selling plans and their prices may change. Bind variant selection events to a function that re-renders the subscription options based on the new variant's allocations.
Subscription widgets are one of the highest-leverage features you can add to a Shopify store. They transform one-time buyers into recurring revenue and, when built with clear UX and solid API integration, they become a seamless part of the shopping experience rather than a friction point.