April 30, 2024
•
5 min read
Since migrating to Shopify in 2021, HyperX has capitalized on the platform's extensive updates and features. Leveraging tools like Shopify Markets for global expansion and optimizing their user experience with Sections Everywhere, HyperX has continually refined their online presence. So, when we presented them with an opportunity to elevate their checkout process using Shopify's Checkout Extensibility, they didn’t hesitate to dive straight in.
In this article, we’re delving into HyperX's checkout migration journey and beyond, exploring the broader landscape of Shopify's checkout evolution. We'll navigate through the transition from checkout.liquid to Checkout Extensibility and its myriad of benefits.
As HyperX’s long-term agency partner, our focus has always been on refining and optimizing their global storefronts to maximize growth—and the run-up to Black Friday is no exception. For BFCM 2023, we identified an opportunity to increase HyperX’s Average Order Value (AOV) at checkout by incorporating upsells and bundling. However, HyperX was using Shopify’s checkout.liquid, the constraints of which make customization time-consuming, requiring clever workarounds.
Our solution? Migrating HyperX to Shopify's latest checkout extensibility—a strategic move aimed at long-term optimization rather than simply addressing immediate Black Friday needs. By transitioning to checkout extensibility, HyperX gains access to a streamlined, agile, and secure checkout with extensive customization capabilities. This migration not only sets HyperX up for Black Friday success but offers ample options for future enhancements and add-ons to their checkout.
Until recently, Shopify Plus merchants relied on customizing checkout.liquid to create engaging checkout experiences. But, checkout.liquid is rigid, created without consideration for varying merchant needs. To enhance the checkout, developers have been forced to create 'hacky' workarounds, often causing performance issues and, occasionally, breaking the checkout entirely.
Consequently, as of August 2024, checkout.liquid will be phased out and no longer supported. Instead, Shopify’s new Checkout Extensibility will take over. And, it seems Shopify has listened to merchant feedback, creating a new checkout that offers ample, well-structured customization, allowing us to extend core Shopify functionality rather than fighting against it.
This new framework empowers merchants to develop apps to tailor their checkout and Shop Pay without altering the checkout’s theme code. They can leverage Checkout UI extensions and Shopify Functions for added functionality, customize styling using the Checkout Branding API, and track events using Web Pixels.
The deadline for Shopify Plus merchants to migrate to Checkout Extensibility before being automatically upgraded is August 13th. Any automatic upgrades will lose existing customizations. Plus, due to the significant change to the checkout and how Checkout Extensibility has been built, much functionality will require re-work. Merchants without a Shopify Plus plan will have their checkouts upgraded automatically and do not require any intervention.
Reach out to our team to discuss what this migration means for your business and how we can help.
By migrating to Checkout Extensibility, HyperX opened up a world of possibilities to enhance their checkout experience. In addition to introducing upsells and bundling at checkout to boost AOV, we leveraged Shopify’s Branding APIs and ensured their global stores’ checkouts remained compliant with regional regulations — and this is only the start of what they can achieve with Checkout Extensibility.
Upsells and cross-Sells
We introduced upsells and cross-sells at checkout by incorporating a “You May Also Like” block showing additional items for purchase and a CTA to add to the cart. Using the Shopify Checkout UI extension, we built a pre-purchase product offer that displays the upsell or cross-sell block to customers.
Bundles
HyperX wanted to include bundle options at checkout, allowing customers to benefit from a percentage discount when buying a certain quantity of products or a specific product.
It made sense to utilize Shopify’s new Bundles App, an out-of-the-box bundle feature launched as part of their Shopify Editions. However, merchants can only access this new app by migrating to Checkout Extensibility, which gave HyperX all the more ammunition to make the transition.
Terms & Conditions and Legal Additions
HyperX also wanted to take this opportunity to update legal terms in their checkout, including showing terms and conditions when completing orders and blocking checkout until the customer agrees to certain Ts&Cs. With Shopify’s Checkout Extensibility, this process was smooth, enabling a component switch that blocks progress in the new checkout until customers meet conditions.
Before, to block progress, merchants would have to devise a JavaScript hack to work around this challenge. Now, there’s an official route.
With multiple global expansion stores that require different legal terms, we built confirmation blocks for different markets, allowing them to adapt each expansion store checkout with the block suitable for their region – now, their checkout is much more flexible for the different markets they sell in.
Branding
Finally, to keep things consistent, we used Shopify’s checkout branding API, which enables custom fonts and styling to ensure the new checkout was in line with HyperX’s brand and the look and feel of the rest of their store. Before, this was achieved by adding CSS code to checkout.liquid. Now, HyperX’s team can update their fonts and styling without coding or workarounds.
We launched HyperX's new checkout across all of its international stores in preparation for Black Friday, resulting in a 16% increase in Average Order Value enabled by upsell components in the new checkout and an incredible 107% conversion rate increase YOY.
By leveraging Shopify’s new Checkout Extensibility features and partnering up with us to identify optimization opportunities, HyperX are able to continue their customers’ exceptional user experience from browsing through to purchase.
Reach out to our team today to explore how we can replicate this success for your business and help you migrate to Checkout Extensibility before the August 13th deadline.
