Deferred purchase option UX guidelines
A great customer-facing user experience (UX) for deferred purchases is important for the success of our merchants because it enables them to offer customers a more flexible purchasing process.
A deferred purchase is any transaction where the payment or fulfillment doesn't happen at the time of purchase, such as pre-order or try before you buy transactions.
This guide explains the key principles of deferred purchases’ needs and component-level guidelines for implementing deferred purchase options user interfaces (UIs).
User experience principles
Anchor link to section titled "User experience principles"To provide a good experience when making deferred purchases and to gain trust from customers, make sure to implement the following UX principles:
- Be clear and up front about important information: Customers should be able to clearly identify the purchase options and make a choice.
- Provide clarity around money: Customers should be able to clearly identify how much they will pay at checkout, the total cost of the product, when they’ll be charged a remaining balance amount (when applicable), and when their payment method will be charged.
- Offer as much clarity around delivery timelines as possible: When possible, provide exact dates or a range, if exact dates are unavailable, for when customers can expect to receive their products, or the duration of the trial period.
- Provide a seamless integration: The deferred purchase options UI should be integrated into the theme’s existing design system.
- Use clear language: Use language that customers can understand and that refers to the actual purchase terms. For example, use "pre-order", "back-order", and "try before you buy", instead of using "deferred purchase".
User interface guidelines
Anchor link to section titled "User interface guidelines"Before you integrate your deferred purchase option app into a theme, familiarize yourself with the UI guidelines and best practices that are associated with each component.
Apps should consider that products with deferred purchase options are displayed in the following places on the online store:
- product pages
- collection pages
- search results
- featured product sections on the home page
- quick view modals on product cards
When customers can see available purchase options at relevant points in the shopping process, they're more likely to utilize them. Ensure that all relevant purchase option information is always included, such as the deposit amount and fulfillment date, estimate for pre-orders, or the trial period length for try before you buy.
Deferred purchase option information is displayed in the following components of the online store:
- Product forms
- Cart items
- Order details
The following sections include guidance for displaying prices, styling UI components for deferred purchase options, and presenting multiple purchase options. In each section, the relevant Liquid properties that are required to create each component are also referenced.
Product forms
Anchor link to section titled "Product forms"The product form enables a customer to select their deferred purchase option. This form 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
- B. Selling plan selection
- C. Selling plan details
- D. Main call-to-action
Example: Product form (pre-order)
Example: Product form (try before you buy)
Customers should be able to clearly identify the full price of the product, and the type of purchase option that the product is.
Example: Price (pre-order)
| # | UI element | Liquid properties and information | UI guidelines |
|---|---|---|---|
| 1 | Price | price |
Reflect the price details from the selected purchase option. |
| 2 | Purchase options badge | selling_plan_group.nameReflect the price details from the selected purchase option. |
Provide a contextual purchase option badge or label to help differentiate against a one-time purchase option. The badge or label will help customers quickly understand that this product can be bought as a pre-order or try before you buy. |
Pricing patterns
Anchor link to section titled "Pricing patterns"Deferred purchase options don’t usually come with savings to encourage customers to purchase products.
Main price component
Anchor link to section titled "Main price component"The main price component should always display the total cost of an item. When a customer selects a selling plan or a product variant, the main price component should reflect their changes.
To help customers understand what purchase option they have selected, do the following:
- Clearly display the product's full price.
- Add the appropriate deferred purchase option badge to the component to help clarify to customers that they aren't buying a regular one-time product.
Example: Main price component (pre-order)
Example: Main price component (try before you buy)
B. Selling plan selection
Anchor link to section titled "B. Selling plan selection"Customers should be able to clearly identify their deferred purchase options.
Example: Selling plan selection (pre-order)
Example: Selling plan selection (try before you buy)
| # | UI element | Liquid properties and information | UI guidelines |
|---|---|---|---|
| 1 | Purchase options | product.selling_plan_groups |
One-time purchase options and selling plan groups are considered different purchase options. Use the term **Purchase options** in your own designs. |
| 2 | One-time purchase | product.requires_selling_planIf the property is false, then at least one 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 isn't available for a given variant. Group layout Prioritize displaying purchase options 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 purchase options as radio inputs instead of buttons. Buttons can easily compete with the product form’s call-to-action. For example, a submit button. |
| 3 | Selling plan group name | selling_plan_group.nameAlways make this value visible. For more information, refer to selling_plan_group.name. |
|
| 4 | Selling plan option value | selling_plan_option.value |
Don't express exact prices in option values, such as "$50 deposit", 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. |
Purchase option label
Anchor link to section titled "Purchase option label"Show the Purchase options label when the following conditions apply:
- A one-time purchase exists and there's at least one
sellingPlanGroupobject. - A one-time purchase isn't available, but there are multiple
sellingPlanGroupobjects of different types.
Shopify doesn't show the Purchase options label when the following conditions apply:
- There are no selling plan groups.
- The product can only be purchased with a selling plan and there's only one selling plan group. In this case, the
sellingPlanGroupname remains in its position, but without the radio input.
Selling plan group name
Anchor link to section titled "Selling plan group name"Selling plan names should make clear the benefit of choosing the deferred purchase option that the customer has chosen. For example, "Pre-order".
Because the SellingPlan object can be associated with multiple selling plan groups on a product, selling plan group names are used to differentiate purchase options.
Display selling plan option values
Anchor link to section titled "Display selling plan option values"All the option values must be displayed at a glance from a group. Consider adapting the component layout to optimize readability.
Components should adapt to the number of options being shown. When there are many options to choose from, an appropriate component should be selected to enable customers to view all options easily. When there are fewer options, a different component may be used. When possible, apply the appropriate layout to all values within a selling plan group for consistency:
- Four options or less: Show each option as a radio button to allow customers to view what’s available.
- More than four options: Use a select dropdown to emphasize the customer's selection and hide other options within the collapsed dropdown.
UI update on variant change
Anchor link to section titled "UI update on variant change"A product’s variants might not all support the same purchase options. As a customer changes their variant selection, the components should update to make clear which purchase options are available and unavailable.
When a selected option within a selling plan group is unavailable, the following events should happen:
- The unavailable options are unselected, and the customer must make a new selection to successfully submit the form.
- The unavailable options for the selected variant are disabled.
- The form submission button is enabled. Disabling the button removes the ability to display an error message and instead displays the product as unavailable, which is false. Let the customer click the button but prevent them from adding the product to the cart. Then, anchor and scroll back to the faulty UI area and display a message that describes why the process can't complete and what the customer needs to do to proceed.
C. Selling plan details
Anchor link to section titled "C. Selling plan details"Display important deferred purchase option terms and selections to customers. The purchase options summary confirms a customer's selections, shows any conditions, and helps build trust in the brand.
Example: Selling plan details (pre-order)
| # | UI element | Liquid properties and information | UI guidelines |
|---|---|---|---|
| 1 | Selling plan description | selling_plan.description |
Don't express exact prices in option values, for example, "$100 deposit". For more information, refer to Considerations for currency switching and price rounding. Consider including a link to the returns or billing policies in the description. Merchants might have more detailed policies that need to be accessed by customers. |
D. Main call-to-action
Anchor link to section titled "D. Main call-to-action"Having a call-to-action (main button text) that reflects the purchase option type helps customers differentiate between a deferred purchase and a one-time purchase, even if there's only one option available.
Example: Shop has accelerated checkout (pre-order and try before you buy)
Example: Shop doesn’t have accelerated checkout (pre-order and try before you buy)
| # | UI element | Liquid 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 purchase option-specific that merchants can customize. | Update the call-to-action label to the dynamic checkout button for a deferred purchase option, and keep the add to cart button as is. |
Each deferred purchase option item displays the most important details to help customers understand their purchase.
- For pre-order items, make sure that the customer understands the fulfillment date and relevant payment information, such as a deposit amount and future payments.
- For try before you buy items, customers should see the trial period length. The price should also match what's represented on the product page.
A cart item includes the following subcomponents:
- Cart page
- Cart notification
Customers tend to scan the cart page and review the information before proceeding to checkout, so it’s important that the following elements are clearly represented.
Example: Cart page (pre-order)
Example: Cart page (try before you buy)
| # | UI element | Liquid properties and information | UI guidelines |
|---|---|---|---|
| 1 | Selling plan information | line_item.selling_plan_allocation.selling_plan.nameUse 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 deferred purchase option, don't list the individual selling plan option values alongside the selling plan name. |
| 2 | Price | price
| Display the full price of the product so that the customer is reminded of the total cost of the item they’re buying. |
| 3 | Price at checkout | selling_plan.checkout_charge.value
| The price customers will pay at checkout. For pre-order items, this price usually represents the deposit amount. For try before you buy items, the price will usually be $0 to indicate to customers that they won’t need to pay anything at checkout. |
Cart notification
Anchor link to section titled "Cart notification"The cart notification returns information about the item that was just added to the cart.
Example: Cart notification (pre-order)
| # | UI element | Liquid properties and information | UI guidelines |
|---|---|---|---|
| 1 | Selling plan information | line_item.selling_plan_allocation.selling_plan.nameUse 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 deferred purchase option, don't list the individual selling plan option values alongside the selling plan name. |
| 2 | Price | price
| Display the full price of the product so that the customer is reminded of the total cost of the item that they’re buying. |
Using the selling plan name
Anchor link to section titled "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, which means that merchants can enter any text value they want using an app.
When creating selling plan names, implement the following recommended guidelines:
- State the type of deferred purchase option.
- Write the deposit amount and payment due date of the product in order for the customer to keep a reference of it throughout the purchase journey.
Considerations for currency switching and price rounding
Anchor link to section titled "Considerations for currency switching and price rounding"Merchants can sell in multiple currencies on their online store.
When a customer visits the online store, Shopify presents the currency that's determined appropriate for the customer. Online stores can offer a currency selector to customers to enable them to manually switch the currency. Shopify also offers a price rounding feature to merchants, which enables merchants to set custom rounding rules for converted prices.
Order details
Anchor link to section titled "Order details"Customers logged in to the store can view the details of each past order. It's important to let the customer easily identify orders with deferred purchase option products.
Example: Order details (pre-order)
| # | UI element | Liquid properties and information | UI guidelines |
|---|---|---|---|
| 1 | Selling plan information | line_item.selling_plan_allocation.selling_plan.nameUse 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 deferred purchase option, don't list the individual selling plan option values alongside the selling plan name. |
| 2 | Price | price
| Display the full price of the product so that the customer is reminded of the total cost of the item they’re buying. |
| 3 | Price at checkout | selling_plan.checkout_charge.value
| The price customers will pay at checkout. For pre-order items, this price usually represents the deposit amount. For try before you buy items, the price will usually be $0 to indicate to customers that they won’t need to pay anything at checkout. |