UX for post-purchase subscriptions

You can use the components listed in the following section in addition to the required components in the UX guidelines for post-purchase upsells to create a post-purchase subscription experience.

Overview of a post-purchase subscription offer breaking down the components

Selling plan options

Anchor link to section titled "Selling plan options"

Use the App Bridge Checkout Select component to display the selling plan options. For example, you can use the component to allow a customer to select whether they want to receive a weekly or a monthly subscription.

Selling plan selector to select the offer

Selling plan description

Anchor link to section titled "Selling plan description"

Use the App Bridge TextBlock component to display important selling plan information to customers, such as subscription terms and selections. You can also use the Textblock component to add a subscription summary that confirms a customer's selections and shows any conditions. Adding this type of information helps build trust in the merchant's brand. Place the description directly beneath the selling plan options.

The description of the selling plan and its features

Anchor link to section titled "Buyer consent form"

Use the BuyerConsent component to add a buyer consent form. A buyer consent form is used by the customer to acknowledge that their payment method will be stored for this subscription order and any future subscription orders of the selected product. The BuyerConsent component can be enabled or disabled by default. You must place the consent form between the money summary and offer buttons and it must only be used when adding a subscription to an offer.

The checkbox where buyers can give their consent to adding a subscription

Recurring subtotal

Anchor link to section titled "Recurring subtotal"

Use the App Bridge Text component to add a recurring summary line to the price breakdown. The recurring summary is used to communicate the selling plan option and recurring cost of the subscription, without taxes, shipping and discounts to the customer.

The price breakdown with a subscription

Next steps

Anchor link to section titled "Next steps"

Learn how to create and update subscriptions in a post-purchase checkout extension.
Explore UX guidelines for the entire checkout experience.
For practical guidance on how to design a user interface for the Shopify admin, refer to Shopify's App Design Guidelines.
Get familiar with Polaris accessibility and content guidelines.