All Tutorials

Online store UX guidelines for subscriptions

All Tutorials

Online store UX guidelines for subscriptions

Online store UX guidelines for subscriptions

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 user interfaces (UIs).

User experience principles

To provide a good subscription buying experience 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.

  • Progressively and logically disclose information: 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.

User interface guidelines

Before you integrate your subscription app into a theme, familiarize yourself with the UI guidelines and best practices associated with each component.

Subscription information displays in the following components of an online store:

The following sections include guidance for displaying prices, styling subscription UI components, and presenting multiple purchase options. In each section, the relevant Liquid API 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 seen on homepages, and quick view modals on a product card.

The subcomponents of a product form include the following:

Product form subcomponents screenshot

Price

A subscription usually comes with savings, which is identified as a huge incentive for customers to purchase subscription items. Compare the price of one-time purchase and subscription using price incentive treatment and a subscription label.

Consider currency switchers and how different currencies affect amount savings and price overrides.

Initial price

If an initial price incentive is applied to a subscription, then explain the current payment and how payments will change in the future.

It’s important to be transparent. A lack of information can cause customer mistrust and might appear misleading. Certain states and countries have laws around price clarity, meaning merchants might be subject to lawsuits.

The following example shows what pricing information you should show to customers:

Price subcomponent screenshot

# UI element API properties and information UI guidelines
1 Price selling_plan_allocation.price Reflect the price details from the selected purchase option.
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 purchase option.

Position the badge to clearly identify the object it’s informing or labelling.

When only subscriptions are available, avoid displaying a subscription badge to help reduce the clutter on a product page and rely on other ways to express this detail.

Additional UI tips:

  • Use established color patterns so customers can quickly identify their status or importance level.
  • Clearly label the badge with short and scannable text.
  • Consider adding “subscription savings” details to highlight subscriptions value. For example, "Subscription - Save $3.00" or "Subscription - Save 10%".
6 Price adjustment selling_plan.price_adjustment

The object includes information on whether adjustment is price or percentage based. This is used instead of sale price.

Selling plan selection

Customers should be able to clearly identify their subscription options:

Selling plan selection subcomponent screenshot

# UI element API properties and information UI guidelines
1 Purchase options label product.requires_selling_plan

product.selling_plan_groups
One-time purchase and selling plan groups are considered different purchase options. Use the term Purchase options in your own designs.
2 One-time purchase option 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 purchase option should be presented in the UI.
Group behavior

On the first page load, select the one-time purchase option 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 is not available for a given variant.

Group layout

Prioritize displaying purchase options in a vertically stacked list to make the readability successful on all devices. When displayed side-by-side, the information can be crowded on smaller screens.

Group style

Consider displaying purchase options 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 purchase options.

Only show “each” next to the price if there’s a prepaid option within the group to maintain consistency among similar text information. Avoid unnecessary words and make the most of space.
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 the option name is also visible to the customer. For example:

  • Name: "Delivery every"
    • Option: "Month"
    • Option: "Week"
Never hide the option names. Certain site designs will hide form labels to make a page look clean, but this can result in the values being presented with no context.
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 (for example, “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 currencies change. For more information, refer to Considerations for currency switching and price rounding.

Purchase options label

Show the Purchase options label when the following conditions apply:

  • A one-time purchase exists and there is at least one sellingPlanGroups.
  • A one-time purchase is not an option, but there are multiple sellingPlanGroups.

Shopify doesn't show the Purchase options label when the following conditions apply:

  • There are no selling plan groups.
  • The product is subscription-only and there is only 1 selling plan group. In this case, the sellingPlanGroup’s name remains in its position, but without the radio input.

Subscription-only use case

Keep the selling group name and the inline price within the selector container. This sustains a stronger relationship between subscription selection and per_delivery_price and maintains a consistent approach across different use cases:

Subscription-only use case screenshot

Selling plan group name

Selling plan names should make clear the benefit of signing up for a subscription (for example, “Subscribe and save 10%”). This incentivizes customers to make a bigger commitment in comparison to one-time purchase options.

The selling plan API allows for multiple selling plan groups on a product, so selling plan group names are used to differentiate purchase options.

Display selling plan option values

It's required to display all the option values at a glance from a group. Consider adapting the component layout for optimizing the scannability.

Components should adapt to the number of options being shown. When there are many options to choose, an appropriate component should be selected to enable customers to view all options easily. Where there is a small number of options, a different component may be used. Within a selling plan group, apply the appropriate layout to all values when possible for consistency:

  • 4 options or less: Show each option as a radio button to allow customers to scan what’s available.
  • More than 4 options: Scanning becomes more difficult, so use a select dropdown to emphasize the customer's selection and hide other options within the collapsed dropdown.
UI update on variant change

A product’s variants might not all support the same subscription options. As a customer changes their variant selection, the components should update to make it clear which subscription options are available and which are unavailable.

When a selected option within a group is unavailable, two events should happen:

  • The unavailable options for the new variant should be disabled.
  • The component should select an available subscription plan, preferably the least expensive plan.

Selling plan details

Display important subscription terms and selections to customers. The subscription summary confirms a customer's selections, shows any conditions, and helps build trust in the brand.

Selling plan details subcomponent screenshot

# UI element API properties and information UI guidelines
1 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 subscription policy in the description. Merchants might have a more detailed subscription policy which needs to be accessed by customers.

In the mockup, the link to View subscription policy is part of the selling plan description and therefore in the merchant’s / app’s control to provide. The intention is to allow individual selling plans to provide a link out to a dedicated URL, if available.

Theshop.subscription_policy object available in Liquid makes it possible to link to a dedicated /policies/subscription-policy page. The content of the page is editable by the merchant in the Shopify admin under Legal settings (/admin/settings/legal). The content of the subscription policy is also available at checkout.

Main call-to-action

Having a call-to-action that reflects the purchase option type helps customers differentiate between subscription options and the one-time purchase option.

Main call to action subcomponent screenshot

# 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.

Shopify does not display the dynamic checkout button on products that include selling plans. Ensure the theme accounts for this and that the primary call-to-action style is used for the form submission.
Update the call-to-action label to Add subscription to cart for a subscription purchase option.

Cart items

Each subscription item displays the most important subscription details to help customers understand their purchase. Customers should be able to understand a subscription’s delivery frequency and, if applicable, the commitment period.

The subcomponents of a cart item include the following:

Cart page

Customers tend to scan the cart page and review the information before continuing to checkout:

Cart page screenshot

# UI element API properties and information UI guidelines
1 Selling plan info line_item.selling_plan_allocation.selling_plan.name

Use selling_plan.name in the cart line item. This same text will be used at checkout. For more information, refer to Using the selling plan name.
As the selling plan name is meant to accurately summarize the subscription, don't list out the individual selling plan option values alongside the selling plan name.

Cart notification

The cart notification returns information on the item that was just added to the cart:

Cart notification screenshot

# UI element API properties and information UI guidelines
1 Selling plan info line_item.selling_plan_allocation.selling_plan.name

This information comes from a Cart API JSON response.

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.
As the selling plan name is meant to accurately summarize the subscription, don't list out the individual selling plan option values alongside the selling plan name.

Using the selling plan name

The selling_plan.name should be a succinct description of the selling plan that can be easily understood by customers. The text is displayed in multiple areas of the online store, such as cart line items, checkout, and past order details. The value is also displayed in the merchant’s internal admin on order pages.

Shopify doesn't control the value of the name, so merchants can enter any text value they want using an app.

When creating selling plan names, implement the following recommended guidlines:

  • State the delivery frequency and a prepaid period (if applicable).
  • Don't state exact dollars amounts (for example, “$9 a month”). Use percentages, when applicable.

Considerations for currency switching and price rounding

Merchants can sell in multiple currencies on their online store.

When a customer comes to the website, Shopify presents the currency determined appropriate for the customer. Online stores can offer a currency selector to customers so they may switch the currency manually. Shopify also offers a price rounding feature to merchants, which allows merchants to set custom rounding rules for converted prices.

Apps and merchants shouldn't write any prices in the various strings that are shown to customers (for example, selling plan names that say “$9.99 a month” or “Save $5”). Any prices written in these strings won't reflect currency switching or price rounding and might be incorrect or misleading to customers.

When an app or merchant wants to express savings in a text field, use percentages whenever possible. For example, “Deliver every week (Save 20%)”.

Next steps