--- title: UX for pre-purchase product offers description: >- Understand the UX guidelines for adding a product offer to checkout, and learn how to design the best experience for customers and merchants. source_url: html: >- https://shopify.dev/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers md: >- https://shopify.dev/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers.md --- ExpandOn this page * [Placement](https://shopify.dev/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers.md#placement) * [Components](https://shopify.dev/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers.md#components) * [Layout](https://shopify.dev/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers.md#layout) * [UX guidelines](https://shopify.dev/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers.md#ux-guidelines) * [Next steps](https://shopify.dev/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers.md#next-steps) # UX for pre-purchase product offers Plus [Checkout UI extensions](https://shopify.dev/docs/api/checkout-ui-extensions) that render on the information and shipping and payment steps in checkout are available only to stores on a [Shopify Plus](https://www.shopify.com/plus) plan. This guide introduces UX guidelines for adding pre-purchase product offers to checkout. *** ## Placement 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 or a block extension target. Learn more about [extension target types](https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview). This product offer example uses the default [`purchase.checkout.block.render` extension target](https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview#block-extension-targets). This target lets merchants choose where they want the extension to display using the [checkout editor](https://help.shopify.com/manual/checkout-settings/checkout-extensibility/checkout-editor), and will render regardless of which checkout features are available. `purchase.checkout.block.render` also enables merchants to place the product offer in the [`ORDER_SUMMARY4` extension target](https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview?accordionItem=checkout-locations-order-summary#checkout-locations-order-summary), which is recommended for a product offer because: * 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](https://shopify.dev/assets/assets/images/apps/checkout/ux-guidelines/ux-product-offer-placement-DdkLqPKe.png) *** ## Components 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: | Component | Tips | | - | - | | [`Divider`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/structure/divider) | Because the product offer will likely display in a [core checkout feature](https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview) such as contact information or order summary line items, include divider lines to help separate the product offer from the order summary. | | [`SkeletonParagraph`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/feedback/skeletonparagraph) | To keep placement from shifting when the content loads, try to reflect the actual content's dimensions. | | [`Image`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/media/image) | To keep the layout consistent, make the thumbnail size the same as the thumbnail size in the order summary. Use `loading="lazy"` to make the image act as a placeholder until it's loaded. | | [`Heading`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/titles-and-text/heading) | We recommend enabling merchants to customize the heading content, as it allows them to tailor the extension to their brand and messaging. | | [`Text`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/titles-and-text/text) | | | [`Button`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/actions/button) | Use secondary buttons here, as primary buttons are reserved for critical actions that progress users through checkout such as **Pay now** and **Next step**. This establishes a visual hierarchy between buttons to minimize confusion and help users understand which actions are the most important. | | [`Banner`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/feedback/banner) | Use banners to communicate error states. | *** ## Layout When you use a nested layout, you'll need only the following structural components: | Component | Preview | Tips | | - | - | - | | [`Stack`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/structure/stack) | ![The Stack component in the context of a nested layout](https://shopify.dev/assets/assets/images/apps/checkout/ux-guidelines/component-blockstack-TUx6Ys9X.png) | You can [nest](#nesting-blockstack) `Stack` components either with themselves or with other components. | | [`Grid`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/structure/grid) | ![The Grid component in the context of a nested layout](https://shopify.dev/assets/assets/images/apps/checkout/ux-guidelines/component-inlinelayout-DNqtYlhP.png) | You can nest `Grid` components with themselves or with other components. | ### Stack Use the `Stack` component to stack elements on top of each other vertically. ![The vertically-oriented Stack component with spacing](https://shopify.dev/assets/assets/images/apps/checkout/ux-guidelines/stack-spacing-DPjUzO3a.png) #### Nesting Stack Set the gap between the divider and the content to `large-200`, for consistency with the rest of checkout's spacing. Set the gap between the heading and the line item content to `base`. To address different spacing values, you can nest a `Stack` inside of another `Stack` component. ![Nesting the vertically-oriented Stack component](https://shopify.dev/assets/assets/images/apps/checkout/ux-guidelines/stack-nesting-Dn9a2-zg.png) ### Grid To display products horizontally, use `Grid`, and set the gap between elements to `base`. ![The horizontally-oriented inline layout component with spacing](https://shopify.dev/assets/assets/images/apps/checkout/ux-guidelines/grid-spacing-DdlfhaHD.png) *** ## 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 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](https://shopify.dev/assets/assets/images/apps/checkout/ux-guidelines/ux-guidelines-max-prod-offers-CyJ3VvZl.png) ### 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. ![A product offer at checkout that is related to what the customer is purchasing](https://shopify.dev/assets/assets/images/apps/checkout/ux-guidelines/ux-guidelines-personalize-prod-offers-DPfN54TF.png) ### 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. *** ## Next steps * Learn how to [offer customers additional products at checkout](https://shopify.dev/docs/apps/build/checkout/product-offers/build-a-pre-purchase-offer) that they can add to their order. - Explore [UX guidelines](https://shopify.dev/docs/apps/build/checkout/ux-for-checkout) for the entire checkout experience. * For practical guidance on how to design a user interface for the Shopify admin, refer to Shopify's [App Design Guidelines](https://shopify.dev/docs/apps/design-guidelines). * Get familiar with Polaris [accessibility](https://polaris.shopify.com/foundations/accessibility) and [content](https://polaris.shopify.com/content/merchant-to-customer) guidelines. *** * [Placement](https://shopify.dev/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers.md#placement) * [Components](https://shopify.dev/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers.md#components) * [Layout](https://shopify.dev/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers.md#layout) * [UX guidelines](https://shopify.dev/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers.md#ux-guidelines) * [Next steps](https://shopify.dev/docs/apps/build/checkout/product-offers/ux-for-pre-purchase-product-offers.md#next-steps)