Skip to main content

UX for pre-purchase product offers

Plus

Checkout UI extensions that render on the information and shipping and payment steps in checkout are available only to stores on a Shopify Plus plan.

This guide introduces UX guidelines for adding pre-purchase product offers to checkout.

Anchor to PlacementPlacement

Choosing the right extension target is key to providing a good experience.

Before you start building, decide whether you want your product offer to render at a static extension target, a dynamic extension target, or whether you'll support both. To learn more about extension target types, refer to the Targets reference.

This product offer example uses the Checkout::Dynamic::Render[OrderSummary4] extension point, 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.

Note

On mobile, the order summary area is collapsed by default. The UI won't display the product offer until the customer expands the order summary.

The target and rendering location for the product offer use case

Anchor to ComponentsComponents

The components to create a product offer depends on the extension's possible states.

The product offer use case can have the following states:

  • Loading

  • Loaded (default)

  • Adding

  • Added

    Note

    Added doesn't need a success banner. The addition of the item to the order summary is confirmation that the item was successfully added to the order.

You can use the following components to create the states:

Components list for the product offer use case
ComponentPreviewTips
DividerThe Divider component, displaying as a horizontal lineBecause 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.
SkeletonTextThe SkeletonText component, displaying as a gray shadowTo keep placement from shifting when the content loads, try to reflect the actual content's dimensions.
SkeletonImageThe SkeletonImage component, displaying as a gray shadow
ImageThe Image component, displaying the product that's being offered at checkoutKeep the thumbnail size the same as the thumbnail in the order summary to keep the layout consistent.
HeadingThe Heading component, displaying header text for the product offer that says 'You might also like'If possible, allow merchants to customize the heading content.
TextThe description portion of the Text component, displaying the price of the product that's being offered at checkout
TextThe Text component, displaying the name of the product that's being offered at checkout
ButtonThe Button component, displaying an 'Add' button with ghost text, with regular text, and in a state that indicates the product is being added to checkoutUse secondary buttons here, reserving the primary button for the main call to actions like Pay now and Next step.
BannerThe Banner component, indicating that there was an issue adding the product and asking the customer to try againUse banners to communicate error states.

Anchor to LayoutLayout

When you use a nested layout, you'll need only the following structural components:

Components list for the product offer use case
ComponentPreviewTips
BlockStackThe BlockStack component in the context of a nested layoutYou can nest BlockStack components either with themselves or with other components.
InlineLayoutThe InlineLayout component in the context of a nested layoutYou can nest Inline components with themselves or with other components.

Anchor to BlockStackBlockStack

Use the BlockStack component to stack elements on top of each other vertically.

The vertically-oriented BlockStack component with spacing

Anchor to Nesting BlockStackNesting BlockStack

Note

BlockStack and BlockLayout components are similar to each other. BlockLayout enables you to specify different row sizes. With BlockStack, you don't need to do that.

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

To address different spacing values, you can nest a BlockStack inside of another BlockStack component.

Nesting the vertically-oriented BlockStack component

Anchor to InlineLayoutInlineLayout

To display products horizontally, use InlineLayout, and set the spacing between elements to base.

The horizontally-oriented inline layout component with spacing

Anchor to UX guidelinesUX 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:

Anchor to Only show two product offers at a timeOnly show two product offers at a time

Adding more than two offers can overwhelm customers, making it difficult for them to choose a product.

A product offer at checkout that displays two items

Anchor to Let merchants personalize product offersLet 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.

A product offer at checkout that is related to what the customer is purchasing

Anchor to Only show necessary informationOnly 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.

Anchor to Next stepsNext steps

Was this page helpful?