UX guidelines for pre-purchase product offers
This guide introduces UX guidelines for adding pre-purchase product offers to checkout.
Choosing the right target is key to providing a good experience.
Before you start building, decide whether you want your product offer to render at a static target, a dynamic target, or whether you'll support both. To learn more about target types, refer to the target API reference.
This product offer example uses the
Checkout::Dynamic::Render[OrderSummary4] target for the following reasons:
The target keeps the line items, discounts, and money lines together, which makes it easy for customers to scan their order summary.
A product offer is considered secondary content, and should therefore be placed outside of the order summary.
The components to create a product offer depends on the extension's possible states.
The product offer use case can have the following states:
You can use the following components to create the states:
||Because the product offer will likely display in a core checkout feature such as contact information or order summary line items, include divider lines to help separate the product offer from the order summary.|
||To keep placement from shifting when the content loads, try to reflect the actual content’s dimensions.|
||Keep the thumbnail size the same as the thumbnail in the order summary to keep the layout consistent.|
||If possible, allow merchants to customize the heading content.|
||Use secondary buttons here, reserving the primary button for the main call to actions like Pay now and Next step.|
||Use banners to communicate error states.|
When you use a nested layout, you'll need only the following structural components:
||You can nest
||You can nest
BlockStack component to stack elements on top of each other vertically.
Nesting BlockStackAnchor link to section titled "Nesting BlockStack"
Set spacing between the divider and the content to
loose, for consistency with the rest of checkout’s spacing. Set the spacing between the heading and the line item content to
To address different spacing values, you can nest a
BlockStack inside of another
InlineLayoutAnchor link to section titled "InlineLayout"
To display products horizontally, use
InlineLayout, and set the spacing between elements to
UX guidelinesAnchor link to section titled "UX guidelines"
Adhere to the following guidelines when you're designing a product offer checkout UI extension, so that you can help merchants gain customer trust and provide a great checkout experience:
Only show two product offers at a timeAnchor link to section titled "Only show two product offers at a time"
Adding more than two offers can overwhelm customers, making it difficult for them to choose a product.
Let merchants personalize product offersAnchor link to section titled "Let merchants personalize product offers"
Customers are more likely to respond positively to offers that relate to their shopping journey or to the items in their cart.
Only show necessary informationAnchor link to section titled "Only show necessary information"
Make it easy for customers to process offer information by only showing what's most relevant. For example, if supporting information like a product description is required, then progressively reveal it to customers at strategic moments.
- Learn how to offer customers additional products at checkout that they can add to their order.
Explore UX guidelines for the entire checkout experience.
For general best practices for developing apps, refer to Best practices for building Shopify apps.
For practical guidance on how to design a user interface for the Shopify admin, refer to Shopify's App Design Guidelines.