Build a custom widget compatible with Product Subscription Plans

Product Subscription Plans allow you flexibility and control over the subscription creation and management experience.

The Recharge subscription widget is designed to support Product Subscription Plans and is maintained alongside any changes to how plans function.

You will need to manually update and ensure that any custom subscription widget created supports Product Subscription Plans. This guide outlines how Product Subscription Plans work with the widget, and steps you may need to take to confirm that your widget is functioning as expected.

Overview

Previous custom-built widgets used Shopify’s Selling Plans to process subscription orders on the storefront. These widgets are normally configured to find all of the Selling Plans in the first Selling Plan Group.

Custom-built widgets must be configured to find all of the Selling Plans in all Selling Plan groups as Product Subscription Plans use all of the Selling Plans in all Selling Plan groups instead of using just the first one. Selling Plan groups also contain a list of variant IDs that the selling plan applies to, allowing you to build a widget that is compatible with variant-level plans as well as product-level plans.

Product Subscription Plans allow you to be more flexible with your subscription offering, allowing you to:

• Configure variant-level plans
• Associate more than one discount type with a product
• Create up to 100 plans/selling groups on one product
• Offer different frequencies per product

How Recharge interacts with Shopify

Building custom widgets requires an advanced understanding of how Recharge works with Shopify’s selling plans. Refer to this section for an overview of how Recharge works with Shopify so that you can offer subscriptions to your customers.

The Selling Plan Group in Shopify, and the associated Selling Plans define the subscription options available for a product.

Each Selling Plan Group is only linked to one product at a time. You can have multiple Variant IDs associated with one Selling Plan Group. The Selling Plan is mapped to a Recharge plan. Each Selling Plan is associated to a Selling Plan Group, and they have a 1:1 relationship.

After you add a Plan (Selling Plan) to a product, the associated variant IDs in the Selling Plan Group have the plan options applied.

See the flow chart below for an overview of how Recharge and Shopify work together:

The flow chart below outlines the Selling Plans concepts with a real product example, the Coffee Subscription.

This flow chart highlights how different Selling Plan Groups apply to different variants within the Recharge plan.