Shopify Checkout cross-sells

 

Context

The buyer experience during a merchant’s checkout, an interstitial injected by a developer during the Shopify Checkout flow.

Upsells and cross-sells are standard sales techniques of offering customers higher-end items, related products, or additional quantities at a discount.

By the end of 2020, these types of features had become a standard third-party developer extension for Shopify’s Checkout flow, increasing a merchant’s average order value by 30%. 

But this came at a cost. Shopify lost out on valuable customer behavior data, the merchant dealt with non-customizable pages and losing control of their customer experience, and customers were left confused to to what exactly they were buying.

UX strategy

My UX team was split in two, one working on our long-term Customer Segmentation platform, while 1 designer, 1 content strategist, and myself joined an existing Checkout engineering team to build an MVP solution. We had to balance the needs of Shopify, our vibrant third party developer community, our merchants, and their customers. And we had to do it in 3 months!

We know we could not shut out developers from developing Checkout plugins, yet the user experience of their current cross-sells and upsells UI was poor.

As UX Manager, I led my team to:

  • Educate our developer community on Shopify Checkout best practices

  • Take the burden of a developer’s front-end development by creating a Shopify cross-sells layout and page template

  • Build out a UI toolkit for developers to extend the template system

  • Document styles and provide developers with documentation

Layout and page template

We “took back control” of the interstitial page by defining a sandbox for developers to build custom templates for their merchants.

 

UI Toolkit

Sample of the type of documentation provided to our third party developer community, with Shopify Checkout styles and new UI components created specifically for cross-sells.

 

Outcomes

Our cross-sells MVP delivered a 12% increase in average order value, migrated our top 3 cross-sells developers to the new template system, and reduced customer confusion during Shopify checkout.

The template system in action, with merchant colors and a developer layout.