Build a custom widget compatible with Product Subscription Plans

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.

📘

Platform:

• Shopify Checkout Integration or Migrated Shopify Checkout Integration stores using a Shopify 2.0 theme

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.

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.

👍

Tip:

To summarize the above, one product is linked to multiple selling plan groups and each group is linked to a single selling plan.

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.