A great customer-facing user experience (UX) for purchasing a subscription is important to the success of our merchants. This guide explains the key principles of subscription needs and component-level guidelines for implementing subscription user interfaces (UIs). > Note: > In order to be eligible for Built for Shopify status, subscription apps must adhere to the [subscription app Built for Shopify design requirements](/docs/apps/design/user-experience/subscription-apps). ## User experience principles To provide a good experience when purchasing subscriptions and gain trust from customers, make sure to implement the following UX principles: - **Create a visible hierarchy**: Customers should be able to clearly identify the savings of a subscription plan, the selling plan options, and the terms and conditions. - **Disclose information progressively and logically**: Customers should have a sense of progression in subscription selection as their decisions clearly influence subsequent choices. Adapt the information shown in the customer flow to communicate subscriptions clearly and concisely. - **Provide a seamless integration**: The subscriptions UI should be integrated into the theme’s existing design system. - **Work with merchants' existing workflows**: Shopify provides the tooling for apps to build subscription experiences. Subscription experiences can be accessed directly from the Shopify admin. This allows merchants to access your app from the surface areas they are familiar with. - **If a resource exists in Shopify, don't duplicate it in your app**: Shopify-managed resources such as customers, discounts, and products should be managed in a single place to reduce complex workflows and duplication. ## User interface guidelines Before you integrate your subscription app into a theme, familiarize yourself with the UI guidelines and best practices that are associated with each component. Apps should consider how subscription products appear in multiple places on the online store, such as product pages, collection pages, search results, featured product sections on the home page, and quick view modals on product cards. Surfacing potential subscription savings and pricing in these areas can further encourage customers to subscribe. Subscription information is displayed in the following components of the online store: - [Product forms](#product-forms) - [Cart items](#cart-items) - [Order details](#order-details) The following sections include guidance for displaying prices, styling subscription UI components, and presenting multiple subscriptions. In each section, the relevant [Liquid](/docs/api/liquid) properties needed to create each component are also referenced. ## Product forms The product form allows a customer to select their subscription. This is where the merchant can provide clarity and more details for a product and its available variants. Product forms are used in product pages, featured product sections on home pages, and quick view modals on product cards. The subcomponents of a product form include the following: - A. [Price](#price) - B. [Selling plan selection](#selling-plan-selection) - C. [Selling plan details](#selling-plan-details) - D. [Main call-to-action](#main-call-to-action)  ### Price Customers should be able to clearly identify the price of a subscription. 
# | UI element | Liquid properties and information | UI guidelines |
---|---|---|---|
1 | Price | selling_plan_allocation.price |
Reflect the price details from the selected subscription. |
2 | Compare at price | selling_plan_allocation.compare_at_price |
|
3 | Per delivery price | selling_plan_allocation.per_delivery_price
Displays only when the value is different from price . This occurs when the selling plan is a prepaid subscription. |
|
4 | Unit price | selling_plan_allocation.unit_price
Unit price values may differ between sellingPlanAllocations . Unit measurement information is on the variant object, as it does not change based on sellingPlan . |
|
5 | Subscription badge | selling_plan.recurring_deliveries
The badge shown when the selling plan involves recurring deliveries (subscription). |
Provide a contextual subscription badge or label to help differentiate against a one-time subscription.
To reduce the clutter on a product page, don't display a badge when the item can only be purchased as a subscription. Rely on other ways to express this detail. |
6 | Price adjustment | selling_plan.price_adjustment
The object includes information on whether the adjustment is price or percentage based. This is used instead of sale price. |
Consider adding "subscription savings" details to highlight the subscription's value. For example, "Subscription - Save $3.00" or "Subscription - Save 10%".
For subscriptions with a pricing policy that changes over time, express the largest savings. For example, "Save up to 30%". For more information, refer to Communicating changes in price over time. |
# | UI element | Liquid properties and information | UI guidelines |
---|---|---|---|
1 | subscriptions label | product.requires_selling_plan
product.selling_plan_groups
|
One-time subscriptions and selling plan groups are considered different subscriptions. Use the term subscriptions in your own designs. |
2 | One-time subscription | product.requires_selling_plan
If the property is false , then at least 1 variant can be purchased as a one-time purchase and the one-time subscription should be presented in the UI.
|
Group behavior
On the first page load, select the one-time subscription by default. When the customer interacts with the UI, consider collapsing the unselected group to make good usage of space. Disable the selling plan group selection when it isn't available for a given variant. Group layout Prioritize displaying subscriptions in a vertically stacked list to make them readable on all devices. When displayed side-by-side, the information can be crowded on smaller screens. Group style Consider displaying subscriptions as radio inputs instead of buttons. Buttons can easily compete with the product form’s call-to-action (submit button). |
3 | Selling plan group name | selling_plan_group.name
Always make this value visible. For more information, refer to Selling plan group name. |
|
4 | Inline price | selling_plan_allocation.per_delivery_price
Using the per_delivery_price is a more relevant comparison between prepaid subscriptions and one-time purchases. |
Showing the price of selling plans inline makes it easier for customers to compare subscriptions.
Show "each" next to the price for both one-time subscriptions and selling plan groups to maintain consistency and clarity among similar text information. For subscriptions with a pricing policy that changes over time, add "from" before the inline pricing to clearly communicate the lowest price of the selling plan group. For example, "from $7.00". For more information, refer to Communicating changes in price over time. |
5 | Selling plan option name | selling_plan_option.name
| Contextualize the type of selling plan option.
Displaying selling plan options Selling plan option values are often written in a way that assumes that the option name is also visible to the customer. For example:
|
6 | Selling plan option value | selling_plan_option.value
For more information, refer to Display selling plan option values. |
Don't express exact prices in option values, such as "Save $5 a week", because the values won't be accurate if the currency changes.
Expressing percentages is possible because they stay consistent even if the currency changes. For more information, refer to Considerations for currency switching and price rounding. |
# | UI element | API properties and information | UI guidelines |
---|---|---|---|
1 | Recurring price line | selling_plan_allocation.price_adjustments
selling_plan.price_adjustments
The selling_plan contains information on how a plan affects product prices, while the selling_plan_allocation describes the price for the variant to which the selling plan is applied. |
Express the number of payment cycles at the current price, and communicate what the price will be in the future. For example, first payment $6.00, then $9.00.
Include the word "each" to clarify when the number of independent recurring payment cycles is greater than 1. For example, first 3 payments $7.00 each, then $9.00. Use "free" when the value is $0.00. This mirrors natural speech and helps customers understand the element. For example, first payment free, then $9.00. |
2 | Selling plan description | selling_plan.description
Merchants might use this field for promotional text. For example, they might use it for marketing terms, a call-to-action, or preemptively answering questions about cancellation policies or refunds. For more information, refer to Subscription policy link. |
Don't express exact prices in option values, for example, "Save $5 a week". For more information, refer to Considerations for currency switching and price rounding.
Consider including a link to the subscription policy in the description. Merchants might have a more detailed subscription policy that needs to be accessed by customers. For subscriptions with a pricing policy that changes over time, for example, "First month free, then save 10% on renewals", communicate any future price changes clearly on the product page. For more information, refer to Communicating changes in price over time. |
# | UI element | API properties and information | UI guidelines |
---|---|---|---|
1 | Call-to-action | On first page load, if the product requires a selling plan or one is selected, then switch the call-to-action string to something subscription-specific that merchants can customize. | Update the call-to-action label to Add subscription to cart for a subscription subscription. |
# | UI element | API properties and information | UI guidelines |
---|---|---|---|
1 | Selling plan information | line_item.selling_plan_allocation.selling_plan.name
Use selling_plan.name in the cart line item. This same text is used at checkout. For more information, refer to Using the selling plan name.
|
Because the selling plan name is meant to accurately summarize the subscription, don't list the individual selling plan option values alongside the selling plan name. |
# | UI element | API properties and information | UI guidelines |
---|---|---|---|
1 | Selling plan information | line_item.selling_plan_allocation.selling_plan.name
This information comes from a Cart API JSON response. Use selling_plan.name in the order line item. The same text is used at checkout. For more information, refer to Using the selling plan name.
|
Because the selling plan name is meant to accurately summarize the subscription, don't list the individual selling plan option values alongside the selling plan name. |
# | UI element | API properties and information | UI guidelines |
---|---|---|---|
1 | Selling plan information | line_item.selling_plan_allocation.selling_plan.name
Use selling_plan.name in the cart notification line item. The same text is used at checkout. For more information, refer to Using the selling plan name.
|
Because the selling plan name is meant to accurately summarize the subscription, don't list the individual selling plan option values alongside the selling plan name. |