Customization

The Order Success Page (OSP) is a key touchpoint that reinforces a seamless post-purchase experience while offering opportunities for further engagement. By customizing its elements, you can enhance user satisfaction, encourage repeat purchases, and align the page with a brand identity. The following customization options provide guidance on optimizing the OSP to meet both user expectations and business goals.

If you haven’t already, please start by reading our General Overview of the Order Success Page.

Item Grouping

Starting from Storefront Application v1.8.0, the order items are shown in a flat list. If multiple of the same variant has been ordered, they will be shown in multiple line items.

To once again group by variant ID, you can customize the logic in SFOspSummarySection.vue. For reference, here is the previous logic which would group by variant ID.

const orderItems = computed((): OrderItem[] => {
  if (!props.orderData?.items) {
    return []
  }

  return props.orderData?.items.filter(
    (item, index, self) =>
      index ===
      self.findIndex((arrayItem) => arrayItem.variant.id === item.variant.id),
  ) as OrderItem[]
})

Translations

The translations of the page copy, headings and title as well as payment types, couriers, and subscription info can be found under the osp key in the localization files.